(1/2)Vue构建单页应用最佳实战
前言
我们将会选择使用一些vue周边的库
1.使用node.js后台，了解到如何获取数据
2.实现单页路由
3.实现HTTP请求我们的node
4.单项数据流
5.使用.vue文件进行开发
最终我们将会构建出一个小demo，不废话，直接上图。
安装
1.我们将会使用webpack去为我们的模块打包，预处理，热加载。如果你对webpack不熟悉，它就是可以帮助我们把多个js文件打包为1个入口文件，并且可以达到按需加载。这就意味着，我们不用去担心由于太多的组件，导致了过多的HTTP请求，这是非常有益于产品体验的。但，我们并不只是为了这个而使用webpack，我们需要用webpack去编译.vue文件，如果没有使用一个loader去转换我们.vue文件里的style，js，html，那么浏览器就无法识别。
2.模块热加载是webpack的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。 通常来说，当我们修改了代码刷新页面，那应用里的所有状态就都没有了。这对于开发一个单页应用来说是非常痛苦的，因为需要重新在跑一遍流程。如果有模块热加载，当你修改了代码，你的代码会直接修改，页面并不会刷新，所以状态也会被保留。
3.Vue也为我们提供了CSS预处理，所以我们可以选择在.vue文件里写LESS或者SASS去代替原生CSS。
4.我们过去通常需要使用npm下载一堆的依赖，但是现在我们可以选择Vue-cli。这是一个vue生态系统中一个伟大创举。这意味着我们不需要手动构建我们的项目，而它就可以很快地为我们生成。
首先，安装vue-cli。(确保你有node和npm)
npm i -g vue-cli
然后创建一个webpack项目并且下载依赖
vue init webpack vue-time-tracker cd vue-time-tracker npm i
接着使用 npm run dev 在热加载中运行我们的应用
这一行命令代表着它会去找到 package.json 的 scripts 对象，执行 node bulid/dev-server.js 。在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器，我们在 localhost:8080 即可查看我们的应用。
这些都准备好后，我们需要为我们的路由和XHR请求下载两个库，我们可以从vue的官网中找到他们。
npm i vue-resource vue-router --save
初始化（main.js）
查看我们的应用文件，我们可以在src目录下找到 App.vue 和 main.js 。在 main.js 文件中，我们引入 Vue 和 App ，并且创建了一个vue的实例（因为在router这行引入了App组件 router.start(App, '#app') ）
// src/main.js
import Vue from 'vue' import App from './App.vue' import Hello from './components/Hello.vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' //注册两个插件 Vue.use(VueResource) Vue.use(VueRouter) const router = new VueRouter() // 路由map router.map({ '/hello': { component: Hello } }) router.redirect({ '*': '/hello' }) router.start(App, '#app')我们还需要在 index.html 包裹下我们的 <app></app>
//index.html
<div id="app"> <app></app> </div>
我们的初始化就到这结束了，接下来让我们开始创建别的组件。
创建首页 View
首先，我们需要为我们的应用增加下bootstrap.css，为了方便，在这就直接在头部引入CDN。
<head>
<meta charset="utf-8"> <title>计划板</title> <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head>
接着在App.vue里为我们的应用写个顶部导航。
// src/App.vue
<template>
<div id="wrapper"> <nav class="navbar navbar-default"> <div class="container"> <a class="navbar-brand" href="#"> <i class="glyphicon glyphicon-time"></i> 计划表 </a> <ul class="nav navbar-nav"> <li><a v-link="'/home'">首页</a></li> <li><a v-link="'/time-entries'">计划列表</a></li> </ul> </div> </nav> <div class="container"> <