本文所涉及代碼全在vue-cnode
單頁應用，即在一個頁面集成系統中所有功能，整個應用只有一個頁面。因為路由的控制在前端，單頁面應用在頁面切換時比傳統頁面更快，從而在前端體驗更好。
將邏輯從后端轉移到前端，提升了性能減少了頁面加載時間，前后邏輯更扁平。但是當頁面復雜度變高時，你會發現，數據處理，UI交互將變得難以維護，所以應運而生，出現了很多MV框架和類庫。Vue就是其中之一，個人覺得（非喜勿噴）Vue類庫相對於其他MV框架上整體的api更為簡潔，提供的api很平衡，解決了問題的同時，沒有增加復雜度。另外個人覺得vue在大型應用，開發中使用vue-loader將組件分成template,style,script結構更為清晰。
本文以及后面相應文章，主要是vue相關技術棧來快速的實現單頁應用開發。系列文章將以一個實際項目進行講解，項目的github地址為：
這是一個以cnodejs.org提供的api來開發的單頁，主要使用的modules有vue、vue-router、vuex、vue-resource。為了快速開發，我們還使用了vue-cli腳手架工具，下文會做介紹。
vue-cli
自從node的興起，前端項目中就開始出現各種預處理工具，當我們開始一個新項目時，我們都會先編寫一些預處理文件，和構建項目目錄。
而vue-cli就是為了做這方面工作的，生成一套提前定義好的構建文件，和相應的文件。
vue-cli有5個對應的項目結構。我們使用的是vue-webpack-boilerplate。
|
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
|
執行上面命令后，我們將生成下面的文件結構，並開一個服務，你可以打開http://localhost:8080看看。
具體的使用建議看文檔。
項目結構
如果你之前就了解vue和vue-router，可以先看這部分。如果你了解vue不了解vue-router,可以先看這篇文章vue-router。如果你連vue都不是很理解我建議，抽5個小時左右把文檔教程過一遍。
你可以看到項目根目錄下面有一個html，僅有的一個html。
上圖的結構是我自己琢磨的，主要是結合vue-router、vuex兩使用方法來考慮的。另外對於組件的復用，將一些功能組件和全局組件都放在根部，通過vuex來控制組件屬性實現一些功能。
下面我就結構由上至下的介紹。
main.js
main.js 是我們的入口文件，主要作用是初始化vue實例並使用需要的插件。
|
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import filter from './filter'
import store from './vuex/store'
import { sync } from 'vuex-router-sync'
import { configRouter } from './config_router'
import resourceGlobalSet from './resource_set'
Vue.use(VueResource)
Vue.use(VueRouter)
// 初始化自定義過濾器
Vue.use(filter)
const router = new VueRouter({
history: true,
saveScrollPosition: true
})
configRouter(router)
Vue.http.options.emulateJSON = true
Vue.http.interceptors.push(resourceGlobalSet) // ajax 攔截
sync(store, router)
router.start(App, 'app')
|
就如同上面所示，主要是使用和配置相應插件，並初始化一個vue，上面的初始化在router.start(App, 'app')，是以App.vue為組要組件，並以html中的為掛載替換點。
APP.vue
App.vue是我們的主組件，所有頁面都是在App.vue下進行切換的。其實你也可以理解為所有的路由也是App.vue的子組件。所以我將router標示為App.vue的子組件。
下面是App.vue的template
|
<template>
<div id="app">
<cn-header></cn-header>
<sidebar></sidebar>
<router-view></router-view>
<tip></tip>
<loading></loading>
</div>
</template>
|
你可以看到route-view和其它全局功能組件，全局組件在一個層級。
另外由於APP.vue在所有頁面都有，我們將會在APP.vue上面寫一些初始化全局方法。
router
router 是具體的業務組件，比如index,login,content等組件都是具體業務相關的。下面就是再和業務相關的組件。
全局組件
全局組件是頁面共用的部分，比如header，footer，navbar，你可能在想如果我有一些header是獨特的怎么辦，這種情況下可以通過路由做判斷，渲染不同的html，如果判斷條件不是路由，也可以在vuex寫一個store記錄組件的state。
功能組件
功能組件是比如dialog,tip等組件，使用來與用戶交互的。
通常情況下，功能組件是各個組件都需要的一些組件。在一個頁面里如果有兩個組件，兩個組件都同時引了一個tip組件作為子組件是純在的。為了避免這種情況，我們將功能組件提到App.vue然后通過vuex進行組件交互，從而就講一個功能組件變成了全局方法。
自定義插件
vue還能自己寫插件。對於一些公用的方法和邏輯，我們可以提出來寫在插件里面。
小節
可以看到，我們項目整體結構非常清晰。入口加載初始化，主組件掛載路由全局控制，然后全局組件功能組件借助vuex進行數據控制。