vue框架学习第四篇——解读 Vue 首页启动过程

前面我们已经学习了 vue 项目结构，这篇开始我们开始进行一个简单的项目，并学习 vue 路由知识。
所谓 vue 路由，实际上是指 vue项目中的页面跳转及连接配置。

一.初始 vue 项目入口 main.js

下面是我们构建项目自动生成的main.js文件，我们可以看到文件由两部分组成
1. 导入文件
主要导入 Vue的全局变量 ，router 路由，以及应用主组件 App.vue。
2. 构造 Vue 的根实例
创建每个组件都会生成一个 Vue 的实例 ,并且会用到根实例上的所有属性。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'   //挂载 Vue的命令，完成Vue全局引入
import App from './App' //导入 App 主组件，此模板和main.js相关联
import router from './router' //导入 Vue 路由

Vue.config.productionTip = false

/* eslint-disable no-new */
//构造一个 Vue 根实例
new Vue({
  el: '#app',  //指定模板内显示区域的 id
  router,      //指定路由
  components: { App },    //注册组件，此处和 App.vue 相关联
  template: '<App/>'      //声明模板，模板相当于自定义的html标签
})

二.认识主组件App.vue

App.vue是项目的主组件，页面所有的路由都可以看做App.vue的子组件，App.vue组件由三部分构成：template 标签，script 标签，style 样式标签。
1. <template> 标签的内容是纯html页面，需要注意的是整个html页面用一个根标签<div></div>包裹起来。
2. <script> 标签的内容主要是定义方法
3. <style> 标签定义样式

template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
//输出 App 组件（不能缺）,其中export default在每个页面只能唯一定义，
export default {
  name: 'App'  //声明组件名称
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三.路由配置文件 index.js

路由配置文件路径为： /src/router/index.js
文件中主要配置路由的依赖关系，也就是页面跳转的链接配置
index.js

import Vue from 'vue'
import Router from 'vue-router'   //引入路由
import HelloWorld from '@/components/HelloWorld'
//注册路由
Vue.use(Router)
//创建路由实例，并导出
export default new Router({
  routes: [
    {
      //指定路由路径，'/' 默认根目录App.vue
      path: '/',    
      //指定路由名称,通过此名称，使用路由
      name: 'HelloWorld',   
      //指定路由跳转组件，替换App.vue中的 <router-view/>
      component: HelloWorld   
    }
  ]
})

四.Vue 项目首页启动过程分析

当我们使用 命令 npm run dev发布到服务器时，首先通过入口main.js 文件加载 App.vue 组件页面，然后通过 index.js中定义的路由指定跳转的组件，替换 App.vue中的 标签 ，完成整个页面的显示。