目录文件大致作用：
noode——modules文件：（包）
public文件:(包含html的根)
src文件（主要操作文件，在public的index使用@调用）：
assets：（公共资源，例如：小图标，公共sass。）
componets：（组件，存放工具，存放组件，存放不是独立页面的东西）
router:（路由，路由配置）
store：：（存储，状态管理，用于处理viewx的配置）
views：视图（放界面页面）
app.vue(全局导航，入口，导航路径，公共配置,操作界面)
main.js(调用模块，全局配置，网站资源)
registerservicework.js（pwa技术，关于服务配置）
一级路由：（src->router->index.js）
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import test from "@/views/test/test.vue";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
children:[
{
path:"a",
component:test
},
{
path:"b",
component:test
},
]
},
{
path:"/test/:year/:moth",
component:test
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
（重点：path和component）
生成新的页面：
1、在views文件中新建文件夹test->新建一个test.vue文件
<template>
<div>
这是我们的test页面
</div>
</template>
<script type="text/ecmascript-6">
export default {
};
</script>
<style lang="scss" scoped>
</style>
2、在app.vue中配置该路由页面
3、在rout文件的index.js中导入页面
4、在npm脚本中运行serve vue-cli
效果：
