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 。