vue開發目錄
基於 vue-cli 腳手架生成項目模板基礎上做了些改動，加入了 vue-router ，vuex 等配套設施，本地 dev server 中加入了接口 mock 功能，還增加一個 build server 來預覽 build 結果頁面，前後端通過 spa 的方式實現分離，並相應做了分離後的聯調，部署方案。在這裏俺也對整個過程簡單做個介紹吧。
目錄結構
├── 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
快速開始
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 的中間件機制，我們可以很方便的添加接口 mock 功能：
在 build/dev-server.js 中新增接口 mock 處理：
// mock api requests
var mockDir = path.resolve(__dirname, ‘../mock‘);
fs.readdirSync(mockDir).forEach(function (file) {
var mock = require(path.resolve(mockDir, file));
app.use(mock.api, mock.response);
});
其中，mock 目錄下可能有個文件內容如下，描述了一個接口的數據信息：
module.exports = {
// 接口地址
api: ‘/api/hello‘,
// 返回數據
response: function (req, res) {
res.send(`
<p>hello vue!</p>
`);
}
}
組件化
整個應用通過 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臺不同的機器上，整個聯調過程，入口頁面需要引用前端機器的靜態資源，又要調用後端機器的異步接口。根據入口頁面的位置，我們可以使用不同的聯調方案：
1. 入口頁面在前端機器：
通過在本地 dev-server 中使用 https://github.com/chimurai/http-proxy-middleware 中間件把接口請求代理到後端機器，vue-cli 生成的 dev-server 中已經自帶了這個功能：
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === ‘string‘) {
options = { target: options }
}
app.use(proxyMiddleware(context, options))
});
最好通過啟動 dev-server 時傳入一個參數來控制是否打開代理功能，這樣可以避免開發階段覆蓋掉我們的 mock 配置。
2. 入口頁面在後端機器： 後端工程裏面的入口 jsp 中引用的 js 文件地址需要指向前端環境中的地址，聯調時才能顯示最新的修改。主要有2種實現方式： 1） jsp 文件引用一個固定域名（如 debughost）的 js 文件， 後端機器上通過修改此域名的ip指向前端機器，達到引入前端環境 js 的目的。 2） jsp 文件通過獲取一個 url 參數（如 debughost）的值，這個值為前端機器的 ip 地址，再動態的插入一個 script 標簽引入這個 ip 的前端 js 文件。
舉個例子，假設前端機器的 ip 為 172.16.36.90，需要加載前端的js文件地址為：http://172.16.36.90:8081/main.js， 那麽後端同學的機器中需要在 host 文件加一條記錄：
172.16.36.90 debughost
而入口 jsp 頁面中則通過以下代碼開加載前端js：
var debughost = ‘debughost‘;
location.search.substr(1).split(‘&‘).forEach(function (item) {
var arr = item.split(‘=‘);
var key = arr[0];
var value = arr[1];
if (key === ‘debughost‘) {
debughost = value;
}
});
var script = document.createElement(‘script‘);
script.type = ‘text/javascript‘;
script.src = ‘http://‘ + debughost + ‘:8081/main.js?‘ + (new Date()).getTime();
document.head.appendChild(script);
這樣，jsp 頁面默認會加載 http://debughost:8081/main.js這個文件。 此外，如果不想用 debughost 這個域名的 js 文件，訪問 jsp 時候還可以通過 url 帶入 debughost 參數來指定前端 ip 。
vue開發目錄