前面我们已经学习了 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中的 标签 ，完成整个页面的显示。