这些都准备好后，我们需要为我们的路由、XHR请求、数据管理下载三个库，我们可以从vue的官网中找到他们。另外我们使用 bootstrap 作为我的UI库
npm i vue-resource vue-router vuex bootstrap –save
初始化（main.js）
查看我们的应用文件，我们可以在src目录下找到 App.vue 和 main.js 。 main.js将会作为我们应用的入口文件而 App.vue 会作为我们应用的初始化组件。先让我们来完善下 main.js
// src/main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'import App from './App'
import Home from './components/Home'
import 'bootstrap/dist/css/bootstrap.css'
Vue.use(VueRouter)
Vue.use(VueResource)
const routes = [{
path : '/',
component : Home
},{
path : '/home',
component : Home
}];
const router = new VueRouter({
routes
});
/* eslint-disable no-new */
// 实例化我们的Vue
var app = new Vue({
el: '#app',
router,
...App,
});
这有两个与1.0不同的地方
一、 vue-router 路由的参数由对象统一变为了数组要注意。还有则是实例化vue的el 参数已经不能设置 html 和 body 了，因为在 vue2 中是会替换我们指定的标签
二、我们必须在实例化vue的时候指定渲染什么组件，以前我们是通过路由来指定如router.start(App, ‘#app’) ，而在vue2中则不需要了
可以发现我们在 main.js 里使用了两个组件 App.vue 和 Home.vue ，稍后让我们具体实现它们的内容。
而我们的 index.html 只需要保留 <div id=”app”></div> 即可，我们的Vue在实例化时设置了 el : ‘#app’ 所以会替换这标签，为我们 App 组件的内容
//index.html
<div id="app"></div>
我们的初始化就到这结束了，接下来让我们开始创建组件。
创建首页组件
首先我们在App.vue里为我们的应用写个顶部导航。
// src/App.vue<template>
<div id="wrapper">
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#" rel="external nofollow" >
<i class="glyphicon glyphicon-time"></i>
计划板
</a>
<ul class="nav navbar-nav">
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/time-entries">计划列表</router-link></li>
</ul>
</div>
</nav>
<div class="container">
<div class="col-sm-3">
</div>
<div class="col-sm-9">
