於 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 等對於團隊專案，都是極為必要的存在，預設引入，也算理所應當）；所以其整個目錄結構是這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
├── 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)等；
|
1 2 3 4 5 6 |
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 也是支援鏈式呼叫）；然而，不乏有勤勞的開發者，不厭其煩的寫著類似的程式碼，這本身倒也沒什麼；但當交給別人去維護、或者去讀的時候，容易造成身心上的創傷。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$.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 請求，那如上磨人的示例，即可修改為如下模樣：
|
1 2 3 4 5 6 7 8 |
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 （如：Nuxt）；但這對於已經處於開發階段的專案，涉及需要更多的調整，相比於其他的可選方案。「傾城之鏈｜NICE LINKS」 是基於 prerender，在
nginx層面，針對瀏覽器作預渲染以優化 SEO，現在看起來效果可以。 另外可以選擇的方案是運用 Prerender SPA Plugin，在Webpack構建專案時預渲染靜態 html 內容，；在未來版本中，會考慮針對這塊兒給出一個相對摺中的方案。 - 塑造更便捷的前端開發環境；這裡所言的
開箱即用，仍需要在您已經安裝高版本node的前提；這對於新晉開發著並不是友好；如果，您使用的是基於windows系統的環境，並不能保證這套腳手架可以很順利執行(?)；因此，有考慮藉助Docker等工具，優化前端開發環境，使其可以更新便捷，而無需依賴更多。
寫在最後的結語
對於分享，您的海量包容和意見建議，是促進彼此都能更上一層樓的關鍵。輸出文字，總是比寫程式碼辛苦的多；在付出多時的敲敲打打之後，希望可以得到您寶貴的意見和建議，使得此腳手架可以更進一步，以惠及到更多的人。最後，推薦您體驗個人最新作品 ～ 「傾城之鏈｜NICE LINKS」： 傾心締造，痴心為你，希望您會喜歡。