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: ''      //声明模板，模板相当于自定义的html标签
})

二.认识主组件App.vue

App.vue是项目的主组件，页面所有的路由都可以看做App.vue的子组件，App.vue组件由三部分构成：template 标签，script 标签，style 样式标签。
1.