基於 vue 全家桶的 spa 項目腳手架

項目簡介

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（顯著提高依賴包的下載速度）。

1. 自行下載並安裝 node.js： https://nodejs.org/en/download/

2. 而後安裝 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 倉庫中，構建過程也是分開的。後端構建時，須要依賴前端的構建結果。具體流程以下：

1. pull 前端項目代碼
2. 構建前端（構建結果放在dist目錄）
3. pull 後端代碼
4. 將前端的構建結果（dist目錄裏的文件）複製到後端工程中
5. 構建後端

提測時，此過程能夠藉助 jenkins 配置。上線時，須要運維同窗配合修改上線腳本。