vue-cli脚手架(简单结构、路由、创建新界面和路由)

 目录文件大致作用：
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'


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')
  }
]
/*路由*/ 
const router = new VueRouter({
  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

 5、效果：