於 2017 年初，有在 Github 建立並維護一個項目：Vue Boilerplate Template，欲成就一款開箱即用 Vue + Webpack 的腳手架模版；其目標與宗旨是：根據以往經驗提供一些參考，對於如何構建中大型 Vue 項目。這蠻久以來，有堅持維護更新，各項主要依賴庫，基本都保持着同步升級；記載這篇文章，即是對關於它的設計做下更全面的闡述，以起到項目 Wiki 的作用。
關於此 Vue、Webpack 腳手架模版
這是一個用以開發 Web 單頁應用的腳手架項目；謹以 Vue 為開發框架、Webpack 為構建工具，element-ui 為 UI 組件庫；同時注入了 vue-router、vuex、vue-i18n，用以支持單頁應用，復雜的狀態管理，以及多語言設定；另外依賴了 lodash、dayjs、js-cookie 等開發工具庫，以提升頁面開發效率。當然，在實際項目中，可根據實際需要自由移除或者修改。在此項目中提供了兩個演示頁，您可以在線查看。
對於如何使用這款腳手架模版，例如先決條件，用法等在 README 中已做說明，此處就不在贅述。此腳手架模版，是基於 vue-cli 所構建，那時 vue-cli 版本還在 2.*；再有就是，主張項目是可以開箱即用，像 vuex、 eslint、sass 等都默認引入（其好處在於：可以清晰較為全套的項目設定；倘若無需多語言，可在此基礎之上做減法，移除 vue-i18n 及相關代碼即可；二來，也無需編寫些額外代碼，來支持用戶選擇性注入依賴，以節省精力，開發更多有價值的功能；三來，這也算是一種道的提倡，像 eslint、 pre-commit 等對於團隊項目，都是極為必要的存在，默認引入，也算理所應當）；所以其整個目錄結構是這樣：
├── LICENSE --------------- 項目許可證（MIT License）文件
├── build ----------------- 存放項目構建相關文件
├── config ---------------- 存放項目構建相關配置文件
├── dist ------------------ 存放項目構建后的輸出文件
├── index.ejs ------------- 項目起始文件 (/index.html)
├── package-lock.json ----- 記錄用 npm 修改依賴操作的鎖文件
├── package.json ---------- npm 的 package.json 處理細節
├── src ------------------- 項目程序主代碼文件夾
│ ├── App.vue ----------- 應用程序的主組件
│ ├── assets ------------ 存放資源：樣式、圖片、字體
│ ├── components -------- 項目自定義的公共組件
│ ├── constants --------- 項目自定義的公共常量
│ ├── filters.js -------- 項目自定義的 vue 過濾指令
│ ├── global.js --------- 協助分擔 main.js 工作
│ ├── helper ------------ 項目自定義輔助各類工具
│ ├── locales ----------- 存放(公用)多語言配置
│ ├── main.js ----------- 項目代碼的人口文件
│ ├── mixins ------------ 存放 mixin 代碼相關
│ ├── router ------------ 存放 & 處理路由相關
│ ├── store ------------- 存放 & 處理 Vuex 相關
│ └── views ------------- 存放項目頁面代碼
├── static ---------------- 靜態的 assets(不被 webpack 處理)
├── test ------------------ 項目各類測試相關
└── yarn.lock ------------- 記錄用 yarn 修改依賴操作的鎖文件
項目背后的環境設定
先從環境說起；眾所周知，鑒於 JavaScript 的發展歷史，隨着其版本的不斷更新，更多新語法和代碼特性被引入進來，使得編寫 JavaScript 體驗持續邁向更好。雖然部分瀏覽器沒有能提供很好的支持，但此腳手架已然引入 babel 系依賴，您可以放心放心 ES6 甚至更超前版本，而不用擔心造成兼容性問題。同樣，對於 CSS 也是一樣，這里已引入 autoprefixer，並作了相應設定，您可以放心使用新特性、預處理語言等，而不用關注瀏覽器供應商前綴。
代碼及提交規則約束
這是至關重要的，對於代碼的設計和編寫；因為：代碼首先是寫給人，然后才是寫給機器 —— 出自《代碼大全》。在設計代碼時候，為其賦予可讀性而花費的時間和努力，絕對物有所值；然而，要求每位成員自覺保持代碼統一質量/風格，這種事情的難度，不亞於靠一己之力去上青天。所以 eslint 系依賴，絕對是團隊項目必裝神器；並將其注入於 Git 的 pre-commit 鈎子內，以強制約定盡可能統一代碼風格；此時江山一統，方有可傳萬世之機。另外，對於代碼的提交，也是同理，圖一時之省心，而提交的無意義 message，這並不是好習慣；因為當你回頭再看，你會發覺所有錯的事情，都發生在最對的時間里。幸好的是，對於這些工作，此腳手架已經幫您做好；當然您可以根據團隊整體喜好而作調整。
所提供的全局性方法
對於代碼的編寫效率，也是尤為的重要；畢竟：“天下武功，唯快不破；即便說輕功不表武功，但速度決定了你我の距離”；更嚴肅的作證這個觀點是：只有快速完成需求，才有時間去學習更多、或在關鍵點上作優化。故此，在此腳手架中，已將常用的工具、插件、方法，通過添加至 Vue 全局實例，以方便調用；譬如：通過添加至 Vue.prototype，或者全局 mixin(minxns/globalMixin.js) 以及過濾(filters.js)等；
import _ from '@helper/lodash.js'
import { $apis, $utils } from '@helper'
Vue.prototype.$_ = _
Vue.prototype.$apis = $apis
Vue.prototype.$utils = $utils
如上這般，您就不用在使用時候反復 import， 直接像這樣 this.$_.debounce 使用即可，從而大幅度節省您的編寫時間開支；對於其中 $ 符號，是個人偏愛的標記，以方便知曉其是來自全局；當然，您可以修改為您所歡喜的記號。您可以看到在 helper 文件夾下，特意開辟出一個文件 lodash.js，用以優化對 lodash 的使用，同時也是為了方便使用；這在 《Webpack 打包優化之體積篇》的 盡量使用模塊化引入 中有過詳細敘述。同理，您可以對所引入的各類庫，進行再次封裝，以使得再項目中可便捷調用，同時可以統一修改、更替，而無需操作調用的地方。另外，值得一提的是對於 HTTP 請求相關的處理。
更優雅的處理 Http 請求
下面是一個上古時代關於處理 Http 請求的實例；以現在的視角來看，它顯得有些極端，甚至有些不可思議，卻是至今仍然屢見不鮮的玩法（即使用的是當下流行的 MVVM 框架，即便 Query.ajax 也是支持鏈式調用）；然而，不乏有勤勞的開發者，不厭其煩的寫着類似的代碼，這本身倒也沒什么；但當交給別人去維護、或者去讀的時候，容易造成身心上的創傷。
$.ajax({
type: "GET",
url: "xxx/getYyyContent",
data: { username: $("#username").val() },
dataType: "json",
success: function (data) {
const textContent = data.data.textContent
$('#text-content').html(textContent)
},
error: function (error) {
// Do something to handle Error
},
complete: function (error) {
// 做額外的處理無論請求成功或失敗
}
});
大道至簡，優秀的開發流程，一定是便於編寫和維護！本腳手架引用類庫 axios 和 q，並對其進行簡單封裝，以處理 Http 請求相關；使其能夠支持鏈式調用，同時對返回數據統一處理，精簡返回內容，使得在獲取到最終結果處，可以盡可能簡單，詳見 helper/ajax.js；另外，推薦開發者將接口，按照功能模塊規划，分門別類以存放至統一文件夾下，如 helper/apis；如此清晰明了，方便調用，且對於多人協作開發，又不相互響應，減少不必要的沖突。類似善用配置，以表驅動法的編程手法，應該活學活用，貫穿始終；具體更詳細的陳述，可參見 如何漂亮使用 Vue 之基礎篇。倘若以此法來處理 Http 請求，那如上磨人的示例，即可修改為如下模樣：
const params = { username: this.form.username }
this.$apis.xxx.getYyyContent(params).then(result => {
this.textContent = result.textContent
}).catch(error => {
// Do something to handle Error
}).fin(() => {
// 做額外的處理無論請求成功或失敗
})
貼心的路由（Router）配置
使用 MVVM 框架 + *-router 來創建單頁應用，已成為一種主流。在此腳手架中，已將 vue-router 添加進來，並進行了處理；並附有示例：router/routes/demo.js；您可以自由的添加路由及頁面映射，來豐盈您的應用程序；同時，您還能為其配置各種頁面信息（如：標題、是否須權限驗證等）。 對於路由配置，更為貼心的配置，在處理與導航欄(/側邊欄)相關部分。
在前后端分離的現代化 Web 應用中，導航欄配置一般由前后端共同作用：后端負責給予相關配置數據，前端則掌管數據與頁面的映射；為了節省工作量，深度拷貝前端路由配置，遞歸遍歷移除無需在導航欄展示項，再融合后端數據，即可組裝出一套后台可配置的應用導航列表，而不用牽扯改動前端。當然，您可以根據業務需求，添加更多設定，使得程序擁有更佳的訪問、維護體驗。比如：為避免每次刷新界面，都發起請求導航欄數據，應將持久化存儲（Eg：localStorage）等等。
完善的 Webpack 打包優化
這是此腳手架一大亮點，即保持着對主流依賴庫的更新及優化，如：webpack、element-ui 等。使用 webpack 來構建 Web 應用程序，如何使其呈現良好的構建速度、優化構建后包體積/文件數量、提升其運行效率等，是每位前端開發者都該去了解的。在這方面，也作了很多學習與嘗試，並將些經驗記載於：Webpack 打包優化之體積篇 & Webpack 打包優化之速度篇。關於其配置方案，參見 Vue Webpack Config；當然，十分歡迎提出您寶貴的建議，協助進一步完善之。另外，值得一提的是，關於構建包的體積與文件數的平衡：避免造成體量很大或很小的包；對此，Webpack 方面也提供很多插件來輔助這件事，譬如：LimitChunkCountPlugin、MinChunkSizePlugin。鑒於 HTTP 工作機制，在不破壞按需加載的基礎上，使得所構建出的 js 文件，數量盡可能少，文件又不過大(100kb ~ 500kb)是一個不錯的選擇，當然這里指的的是服務端開啟 gip 壓縮的情況下；如果是由前端負責開啟 gzip 壓縮，這個 Size 上限應該更低些為宜。除了外，考慮通過 HTTP/2 來對項目項目進行優化，是另一個緯度的解決方案，在此就不多做探討。
支持漸進式 Web 應用程序
漸進式 Web 應用程序（PWA ～ Progressive Web App）：它的存在，使得在網絡上提供驚人用戶體驗的新方式，它為構建高質量的漸進式 Web 應用程序，提供了令人難以置信的優勢，可以輕松取悅用戶，增加參與度並增加轉化次數。所以這已經成為了現代化 Web 應用程序必做工作。本腳手架對 PWA 的支持，選擇參考了 vuejs-templates/pwa，其中用到 sw-precache-webpack-plugin 插件協助生成 service-worker.js。鑒於 serviceWorker 本身的些許限制，此模版默認不引入此功能，取消此行被注釋的代碼，即可打開該功能。關於這部分更多，可參見優化網頁 Performance、Progressive、Accessibility、Best Practices 相關提交 & 陳述。推薦您使用 Lighthouse 谷歌瀏覽擴展，來對自己的 Web 應用跑分，以查糾項目中潛存的可優化點。
需要補充說明的是：您可以在項目全局搜索 ~@CHANGE@~ 關鍵字，這是對於可變化設定的標記；您可以根據項目實際所需，對該部分進行修改。
腳手架提供的默認命令
您知道，npm（yarn 亦同）允許在 package.json 文件里面，使用 scripts 字段定義腳本命令。它支持通配符、變量、鈎子、外部傳參、支持並發 & 異步執行等等；所以，完全可以借助 npm script，打造屬於自己的高效工作流。在此腳手架中，默認只是些提供了簡單命令，您可以在自己的腳本中，結合您歡喜的工具，如 gulp、bash 等，來塑造屬於您的高效工作流。下面對默認命令略作說明：
| npm (yarn) 命令 | 功能描述 |
|---|---|
| yarn start | 運行項目以開發環境，是 yarn run dev 的快捷版方式 |
| yarn run build:dll | 構建出 vendor.dll.js，依據 webpack.dll.conf.js |
| yarn run build | 構建項目，以生產環境 |
| yarn run jarvis | 運行 webpack-jarvis（非常智能的基於瀏覽器的Webpack儀表板）在 http://localhost:1337/ |
| yarn run analyz | 對所構建的包進行可視化呈現，在 http://localhost:8888/ |
| yarn run preview | 對項目進行在本地預覽，以生產環境，在 http://localhost:3000/ |
| yarn run pretest | 對生產環境所構建的包進行簡單的“預測”：在 http://localhost:3000/ |
使用此腳手架的線上項目
- 「傾城之鏈｜NICE LINKS」：一個開放平台，旨在雲集全球優秀網站，探索互聯網中更廣闊的世界；在這里，你可以輕松發現、學習、分享更多有用或有趣的事物。
項目待優化的那些方向
- 完善單元測試相關；在代碼層面，做好單元測試，有助於提升代碼質量，從而使得項目質量、后續維護都可以更好。考慮將在之后的版本中，參考 Vue Test Utils 對這塊兒進行完善。
- SEO 優化相關；這是多方都應該考慮的問題；但在項目設計層面，可以考慮服務端渲染來極大提升 SEO；但這對於已經處於開發階段的項目，涉及需要更多的調整，相比於其他的方案。「傾城之鏈｜NICE LINKS」 是基於 prerender，在
nginx層面，針對瀏覽器作預渲染以優化 SEO，現在看起來效果可以。 另外可以選擇的方案是 Prerender SPA Plugin，在Webpack構建項目時預渲染靜態 html 內容，；在未來版本中，會考慮針對這塊兒給出一個相對折中的方案。
寫在最后的結語
對於分享，您的海量包容和意見建議，是促進彼此都能更上一層樓的關鍵。輸出文字，總是比寫代碼辛苦的多；在付出多時的敲敲打打之后，希望可以得到您寶貴的意見和建議，使得此腳手架可以更進一步，以惠及到更多的人。最后，推薦您體驗個人最新作品 ～ 「傾城之鏈｜NICE LINKS」： 傾心締造，痴心為你，希望您會喜歡。
@2018-05-13 於深圳.南山 Last Modify： 2018-05-20