//var Vue = require('vue')
// это вариант автора genri. если раскомментировать - сломается.
//var VueRouter = require('vue-router').default
// это вариант автора genri. если раскомментировать - сломается.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// Vue.use(VueRouter)
// эта строка не мешает, если будет нужна - пожалуйста...
const router = new VueRouter({
// mode: 'history',
// и без этой строки сможем обойтись.
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
const app = new Vue({ el: '#app', router: router })
// это вариант автора genri. как видим, он рабочий.
//const app = new Vue({router}).$mount('#app')
// это тоже рабочий, шаблонный вариант.width: 96%; /* ширина .slider = 100% минус отступ слева умноженный на 2 */
margin-left: 2%; /* отступ слева = 100% минус ширина .slider и место справа */<svg id="seg" viewBox="0 0 400 400" style="background: #acc;">
<defs>
<g id="circle"><circle r="50%" cx="0%" cy="0%"/></g>
</defs>
<style>
#mal {font: italic 12px sans-serif;fill: #000;}
#seg {border-radius:30%;transform: rotate(0grad);} /* здесь - вращать треугл вместе с содержимым*/
#circle {
fill: none;
stroke: #f82;
stroke-width: 100%;
stroke-dasharray: 29% 360%;
} /* Здесь можно сузить бёдра треугла */
</style>
<symbol id="txt" x="0" y="0" viewBox="0 0 200 200" width="100" height="100" style="background-color: #c6c;">
<text id="mal" x="0" y="42%">Текст по центру </text>
<text id="mal" x="0" y="50%">и при этом не заходит за</text>
<text id="mal" x="0" y="58%">границы фигуры </text>
</symbol>
<use xlink:href="#circle" x="7.1%" y="0%" width="20" height="20" transform="rotate(73, 110, 110)"></use>
<use xlink:href="#txt" x="5%" y="0%" width="400" height="400" transform="rotate(-90, 200, 200)"></use>
</svg>
<!-- -->body {background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#243844;
background-size:16px 16px;
background-attachment: fixed;
}<div class="box"></div>.box {
margin: 1rem;
width: 15rem;
height: 15rem;
box-sizing: border-box;
text-align: center;
vertical-align: center;
border: 6.5rem solid transparent;
border-image: radial-gradient(#bcc, #888 30%,
#e62 50%, #2cc, #828 69%, transparent 72%) 10% fill;
}