学习各种引入，导入

首先在main.js中做好配置

1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' //引入vue 4 import ElementUI from 'element-ui' //引入ui组件 5 import 'element-ui/lib/theme-chalk/index.css' //引入ui组件css 6 import App from './App' //引入app.vue 7 import router from './router' //引入vue-router配置 8 import Music from './components/Music' //引入自定义组件music 9 Vue.use(ElementUI) //使用ui组件10 Vue.use(Music) //使用自定义组件11 Vue.config.productionTip = false12 13 /* eslint-disable no-new 实例化vue*/14 new Vue({15   el: '#app',16   router,17   components: { App },18   template: '
     '19 })

配置好以上信息后，配置router

1 import Vue from 'vue' 2 import Router from 'vue-router' 3 // 配置所有页面路由路径 4  5 Vue.use(Router)  //使用router 6 Vue.use(require('vue-wechat-title')); //实例化参数动态改变页面title   用法1：可以在各模块页面单独引入  用法2：也可以在app.vue统一引用。效果一样
     
 7 export default new Router({ 8   routes: [ 9   // 默认首路径即是首页的页面10     {11       path: '/',12       name: 'Index',13       meta: { title: '首页' },14       component: resolve => require(['@/pages/Index'], resolve)//异步加载组件好处按需加载不需要用户一次性加载各模块15     },16     // 分类17     {18         path: '/list',19         name: 'List',20         meta: { title: '分类' },21         component: resolve => require(['@/pages/List'], resolve)22     },23     //个人中心24     {25         path: '/my',26         name: 'My',27         meta: { title: '我的' },28         component: resolve => require(['@/pages/My'], resolve)29     },30     {31       path: '/journalList',32       name: 'JournalList',33       meta: { title: '日志列表' },34       component: resolve => require(['@/pages/JournalList'], resolve)35     }  36   ]37 })

配置好这些以后，接下来就是模块信息

1 
     18 19 34 35