項目簡介
Github: https://github.com/hanan198501/vue-spa-template
我們基於 vue-cli 腳手架生成項目模板做了一些改造，
加入了 vue-router ，vuex 等配套設施，本地 dev server 中加入了接口 mock 功能，還增加一個 build server 來預覽 build 結果頁面，前后端通過 spa 的方式實現分離，並相應做了分離后的聯調，部署方案。
通過這個項目模板，可以快速搭建起用於前后端分離后的單頁應用開發環境，項目主要包含：
- 基礎庫:
vue.js、vue-router、vuex、whatwg-fetch - 編譯/打包工具：
webpack、babel、node-sass - 單元測試工具：
karma、mocha、sinon-chai - 本地服務器：
express
目錄結構
├── README.md 項目介紹
├── index.html 入口頁面
├── build 構建腳本目錄
│ ├── build-server.js 運行本地構建服務器，可以訪問構建后的頁面
│ ├── build.js 生產環境構建腳本
│ ├── dev-client.js 開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新
│ ├── dev-server.js 運行本地開發服務器
│ ├── utils.js 構建相關工具方法
│ ├── webpack.base.conf.js wabpack基礎配置
│ ├── webpack.dev.conf.js wabpack開發環境配置
│ └── webpack.prod.conf.js wabpack生產環境配置
├── config 項目配置
│ ├── dev.env.js 開發環境變量
│ ├── index.js 項目配置文件
│ ├── prod.env.js 生產環境變量
│ └── test.env.js 測試環境變量
├── mock mock數據目錄
│ └── hello.js
├── package.json npm包配置文件，里面定義了項目的npm腳本，依賴包等信息
├── src 源碼目錄
│ ├── main.js 入口js文件
│ ├── app.vue 根組件
│ ├── components 公共組件目錄
│ │ └── title.vue
│ ├── assets 資源目錄，這里的資源會被wabpack構建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 應用級數據（state）
│ │ └── index.js
│ └── views 頁面目錄
│ ├── hello.vue
│ └── notfound.vue
├── static 純靜態資源，不會被wabpack構建。
└── test 測試文件目錄（unit&e2e）
└── unit 單元測試
├── index.js 入口腳本
├── karma.conf.js karma配置文件
└── specs 單測case目錄
└── Hello.spec.js
環境安裝
本項目依賴 node.js， 使用前先安裝 node.js 和 cnpm（顯著提升依賴包的下載速度）。
- 自行下載並安裝 node.js： https://nodejs.org/en/download/
-
然后安裝 cnpm 命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
快速開始
git clone https://github.com/hanan198501/vue-spa-template.git
cd vue-spa-template
cnpm install
npm run dev
命令列表：
#開啟本地開發服務器，監控項目文件的變化，實時構建並自動刷新瀏覽器，瀏覽器訪問 http://localhost:8081
npm run dev
#使用生產環境配置構建項目，構建好的文件會輸出到 "dist" 目錄，
npm run build
#運行構建服務器，可以查看構建的頁面
npm run build-server
#運行單元測試
npm run unit
前后端分離
項目基於 spa 方式實現前后端分離，后端將所有 url 都返回到同一個 jsp 頁面（由前端提供），此 jsp 頁面也是前端的入口頁面。然后路由由前端控制（基於vue-router），根據不同的 url 加載相應數據和組件進行渲染。
接口 mock
前后端分離后，開發前需要和后端同學定義好接口信息（請求地址，參數，返回信息等），前端通過 mock 的方式，即可開始編碼，無需等待后端接口 ready。
項目的本地開發服務器是基於 express 搭建的，通過 express 的中間件機制，我們已經在 dev-server 中添加了接口 mock 功能。
開發時，接口的 mock 數據統一放在 mock 目錄下，每個文件內如下：
module.exports = {
// 接口地址
api: '/api/hello',
// 返回數據 參考http://expressjs.com/zh-cn/4x/api.html
response: function (req, res) {
res.send(`
<p>hello vue!</p>
`);
}
}
模塊化
開發時可以使用 ES2015 module 語法，構建時每個文件會編譯成 amd 模塊。
組件化
整個應用通過 vue 組件的方式搭建起來，通過 vue-router 控制相應組件的展現，組件樹結構如下：
app.vue 根組件（整個應用只有一個）
├──view1.vue 頁面級組件，放在 views 目錄里面，有子組件時，可以建立子目錄
│ ├──component1.vue 功能組件，公用的放在 components 目錄，否則放在 views 子目錄
│ ├──component2.vue
│ └──component3.vue
├──view2.vue
│ ├──component1.vue
│ └──component4.vue
└──view3.vue
├──component5.vue
……
單元測試
可以為每個組件編寫單元測試，放在 test/unit/specs 目錄下面, 單元測試用例的目錄結構建議和測試的文件保持一致（相對於src），每個測試用例文件名以 .spec.js結尾。
執行 npm run unit 時會遍歷所有的 spec.js 文件，產出測試報告在 test/unit/coverage 目錄。
聯調方式
前后端分離后，由於服務端和前端的開發環境處於2台不同的機器上，前端的異步請求需要代理到后端機器中。
聯調的時候，只需通過 proxy 參數運行 dev 腳本即可，所有 mock 目錄下定義的接口將會轉發到 proxy 參數指定的機器：
# 172.16.36.90：8083 為后端機器的環境地址
npm run dev -- --proxy=172.16.36.90/:8083
這樣，如果 mock 目錄下有定義了接口 /api/hello ，將會轉發到 http://172.16.36.90/:8083/api/hello
部署方案
分離后前后端代碼會存放在2個單獨的 git 倉庫中，構建過程也是分開的。后端構建時，需要依賴前端的構建結果。具體流程如下：
- pull 前端項目代碼
- 構建前端（構建結果放在dist目錄）
- pull 后端代碼
- 將前端的構建結果（dist目錄里的文件）復制到后端工程中
- 構建后端
提測時，此過程可以借助 jenkins 配置。上線時，需要運維同學配合修改上線腳本。