Vue-cli路由以及使用less

省略安装脚手架的指令直接看结构
配置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>