目录文件大致作用：

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)

/*
  路由配置
    path:路由地址
    name: 路由名字 可通过名字跳转 
    component:组件 显示home页面 
    meta:{data:"Home data"} 数据/路由参数
*/
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')
  },
  {
    path: '/test',
    component: Test
  }
]

/*路由*/
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

/*生成路由*/
export default router

生成新的页面：

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* 5、效果：