访问index.html后，main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。
2.main.js(项目开始展示内容) import Vue from 'vue'import App from './App' //App.vueimport router from './router'//前3个导入自带的vueimport MuseUI from 'muse-ui'import 'common/style/muse-ui.css'import fastclick from 'fastclick'//导入第三方封装好的vuefastclick.attach(document.body)Vue.use(MuseUI)Vue.use(materialicons)//使用第三方封装好的vue//app这个vue的实例会接管app这个// dom里面的内容,会分析<div id="app"> </div>这个dom里面所有的内容,并显示出来new Vue({ el: '#app', //创建的vue实例负责处理的区域 router, //路由处理vue页面的跳转，相当于路径导航 render: h => h(App)})template:‘<app/>’,components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果前者识别<template>标签，后者直接解析template下的id为app的div(忽略template的存在) 3.App.vue <template> <div id="app"> // vue实例渲染出的内容挂载的目标 <router-view></router-view> </div></template><script>export default { name: 'App', data () { return { } }}</script><style lang="less"></style> 4.index.js(项目开始展示内容) import Vue from 'vue'import Router from 'vue-router'//导入内部vue文件import Auth from '@/views/Auth'import FuelFill from '@/views/FuelFill'//导入自定义vue文件，@代表src目录Vue.use(Router)//vue使用Router路由export default new Router({ routes: [ { path: '/', //打开浏览器的第一个页面的路径，根路径 redirect: '/auth'//将根路径重定向到/auth路径下 }, { path: '/auth', name: 'Auth', component: Auth //路径/auth的页面加载Auth组件，这里路径是指浏览器地址路径 }, { path: '/fuelfill', name: 'FuelFill', component: FuelFill //路径/FuelFill的页面加载Auth组件，这里路径是指浏览器地址路径 } ]})//例如：http://localhost:8080/#/auth 这个界面就是Auth组件布局的 http://localhost:8080/#/fuelfill 这个界面就是fuelfill组件布局 5.Auth.vue //vue组件有3部分组成// 1.模板：布局页面框架（html）<template> <div> <mu-container> <mu-dialog width="85%" :open.sync="openSimple" :overlay-close="false"> <span style="text-align: center"> <img class="authImg" :src="titleImg"/> <p class="authTitle">授权</p> <p class="authSubTitle1">已为您绑定手机号：</p> <p class="authSubTitle2">未绑定手机号</p> </span> <mu-button slot="actions" :flat="false" color="#43b79c" l @click="fuelFilling">我知道了</mu-button> </mu-dialog> </mu-container> </div></template><script>export default { data() { return { openSimple: true, titleImg: require('common/image/cnpc.png') } }, methods: { fuelFilling: function () { this.$router.push({path: '/fuelfill'}) } }}</script><style scoped lang="stylus" rel="stylesheet/stylus"> @import "~common/stylus/variable" .authImg width: 5em height: 5em .authTitle font-size: 1.2em color: white margin-top: 2em .authSubTitle1 font-size: 1.0em color: white margin-top: 2em .authSubTitle2 font-size: 1.0em color: #878787 margin-top: 1em</style> 6.配置文件webpack.base.conf.js resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'),//相当于替换 'src': resolve('src'),//相当于替换 'common': resolve('src/common'),//相当于替换 'components': resolve('src/components')//相当于替换 } },在文件中render:h=>h(App)是ES6中的箭头函数写法，等价于render:function(h){return h(App);}. 注意点： 1.箭头函数中的this是 指向 包裹this所在函数外面的对象上。 2.h是creatElement的别名，vue生态系统的通用管理 3.template:‘’,components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果,前者识别标签，后者直接解析template下的id为app的div(忽略template的存在)飞艇如何买前5后5的存在)