Vue-cli路由以及使用less
阿新 • • 發佈:2018-12-15
省略安裝腳手架的指令直接看結構
配置less
注意:scoped作用於當前模組,但其下子元件也會共享這個scoped,要注意!!!
Vue路由用的是<router-link on="index.js裡面配置的路徑"></router-link>
index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import one from '@/components/one' import two from '@/components/two' import three from '@/components/three' import four from '@/components/four' import fourch from '@/page/four/fourch' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, children:[ { path:"one", component:one }, { path:"two", component:two }, { path:"three", component:three }, { path:"four", component:four, children:[ { path:"/four/fourch", component:fourch } ] } ] } ] })
helloWorld.vue(首頁)
<template> <div> <div class="div1"> <ul> <li> <router-link to="/one">首頁</router-link></li> <li> <router-link to="/two"> 第二頁</router-link></li> <li><router-link to="/three">第三頁 </router-link></li> <li><router-link to="/four">第四頁 </router-link></li> </ul> </div> <router-view></router-view> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: '' } } } </script> <style scoped lang="less"> .div1{ border: 1px solid #000; li{ display: inline-block; } } </style>
對應的子元件
one.vue
<template>
<div class="oned">
one
</div>
</template>
<style scoped lang="less">
.oned{
background-color: #ccc;
}
</style>