借助 Vue 来构建单页面应用
(1/2)Vue构建单页应用最佳实战
前言
咱们将会选择使用一些vue周边的库javascript
1.使用node.js后台，了解到如何获取数据php
2.实现单页路由css
3.实现HTTP请求咱们的nodehtml
4.单项数据流前端
5.使用.vue文件进行开发vue
最终咱们将会构建出一个小demo，不废话，直接上图。
java
安装
1.咱们将会使用webpack去为咱们的模块打包，预处理，热加载。若是你对webpack不熟悉，它就是能够帮助咱们把多个js文件打包为1个入口文件，而且能够达到按需加载。这就意味着，咱们不用去担忧因为太多的组件，致使了过多的HTTP请求，这是很是有益于产品体验的。但，咱们并不仅是为了这个而使用webpack，咱们须要用webpack去编译.vue文件，若是没有使用一个loader去转换咱们.vue文件里的style，js，html，那么浏览器就没法识别。node
2.模块热加载是webpack的一个很是碉堡的特性，将会为咱们的单页应用带来极大的便利。 一般来讲，当咱们修改了代码刷新页面，那应用里的全部状态就都没有了。这对于开发一个单页应用来讲是很是痛苦的，由于须要从新在跑一遍流程。若是有模块热加载，当你修改了代码，你的代码会直接修改，页面并不会刷新，因此状态也会被保留。jquery
3.Vue也为咱们提供了CSS预处理，因此咱们能够选择在.vue文件里写LESS或者SASS去代替原生CSS。webpack
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"> <div class=