1.vue项目访问顺序

访问index.html后，main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。

2.main.js(项目开始展示内容)

import Vue from 'vue'
import App from './App'  //App.vue
import router from './router'//前3个导入自带的vue

import MuseUI from 'muse-ui'
import 'common/style/muse-ui.css'
import fastclick from 'fastclick'//导入第三方封装好的vue
fastclick.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的存在)