前端設計範式三大天王之Vue.js：最完整實例作戰

前 言

寫作背景

我從事軟體開發至今接近18年了，在進入這個產業之前，只有軟體工程師與硬體工程師之分，並無所謂前端工程師或後端工程師之說。前端後端都必須懂，否則根本找不到工作。當然，現在對於前端工程師與後端工程師的劃分是由於軟體技術發展實在太快了，兩個方向已經發展成各自獨立的系統，前端開發由於技術的革新、行動端的崛起，其地位顯得越來越重要。

我是從jQuery 1.0開始真正地接受前端專案化開發概念的，也是從那時對 JavaScript產生一發而不可收的興趣。因為前端專案化能使專案的系統結構更加合理，那些在後端實現起來極為繁雜的互動操作以一種最「輕巧」的方式給取代了。當第一次遇到Angular之時我更是興奮不已，它簡直就是為傳統工程師或說是後端工程師配備的最強大的前端武器！雖然Angular的入門曲線非常陡峭，很多內容都極為晦澀難懂，但它與jQuery一樣，可以算得上是前端架構發展史上的一座豐碑。

軟體領域中後者永遠具有更大的吸引力，在前端開發領域，React可以說是繼Angular之後又一震撼整個前端開發圈的重磅炸彈。與Angular相比，它大幅降低學習的成本，同時擁有極高效的執行效能，一下子蓋過了Angular的風頭。Angular與React兩套前端架構的崛起也掀起整個前端開發圈的一股革命，實際上我們都清楚這是Google與Facebook之間對開發者的一種爭奪方法。對於一直從事實戰領域應用的開發者而言，雖然有更多的選擇是好事，但「誰更好用？誰更強大？」這種選擇困難症也將伴隨而來。

Angular與React各有優劣，很難從綜合性上評判誰比誰更好，加上Angular2的誕生，使得我們更難以從中選擇最合心意的架構了，可能最熟悉的就自然成為最好的了吧。

2016年我和我的團隊所從事的Web專案由於需要有大量介面互動功能，因此我引用Angular2 + Flask的搭配方式作為專案的基礎語言架構。然而，我的團隊大多是由從事多年後端開發和系統開發的工程師所組成，他們對當下前端的前端技術涉獵並不算深入，我只能不斷地進行內部教育訓練以快速提升團隊的前端開發實力。Angular2一直處於Beta狀態，而且相關的官方開發文件一直缺失，開發與測試工具的發展也相對落後，在實際使用過程中，TypeScript這個將弱型態化的JS強制變成強型態語言的怪胎在不斷地給我們製造麻煩，除了讓團隊接受Angular2對Angular的最佳化模式，還得不斷地在各種大坑中求生存，毫無疑問這對於我和我的團隊是一種相當大的挑戰。當時我非常擔心由於選擇Angular2而導致專案失敗，中途曾想過用React加以取代。但從實際出發，這只是一種換湯不換藥的方案而已，直到我們偶然間遇到了Vue，Vue可以說是為我們專案生的希望！選取了Vue是因為我和我的團隊只是付出極小的代價，甚至是毫無障礙地將Angular2上開發的程式切換到Vue上面來，Vue的開發工具鏈雖沒有Angular.js完備，但有vue-cli的輔助，基本上也能應付專案開發的需要，架構理論上幾乎就是對Angular.js的簡化。適合我們專案使用的社區資源也非常豐富，效能、工具鏈、學習曲線、極小的執行函數庫這些優點一下就完全彌補了Angular的不足，也成為我們專案最後能守住的最堅實的防線。

編撰此書出於一次巧合，在升級到Vue2之後我一直想找一本能系統化、全面地說明Vue2開發的書籍作為我團隊的教育訓練教材，但很可惜一直無法找到。出於一時的心血來潮，突然間想將我們在實作中應用Vue2的一些技巧和方法記錄下來編撰成書，此時也獲得本書的策劃編輯陳曉猛先生給予鼓勵與支援才得以成書。

此書從構思到成書耗時四個月，實際在編撰上的時間估計一個月左右，其他的時間都用在準備素材與程式撰寫上。書中的素材都取自我參與過的專案，在此過程中我對Vue2的實作應用也有很大的加強與深化。期望此書能為正在奮鬥於前端開發工作的同行們帶來幫助，同時也作為我對Vue團隊的一種支援。Vue是一款能與世界級的Angular與React比肩的前端架構！

內容介紹

本書以Vue2的理論為中心，以實戰範例為基礎，透過範例應用展開覆蓋Vue的各個理論基礎知識。本書從實作應用出發，對Vue官方未曾進行詳盡說明甚至不曾提及的實用內容進行揭秘，試圖使此書能成為你在Vue前端專案化開發實戰中的參考手冊。本書主要從多個範例由淺入深地說明Vue的使用知識，除此之外，還重點介紹Vue專案化開發中必備的原始程式庫、協力廠商開發工具以及如何對Vue的各種模組進行全方位的測試。

第1章從一個經典的「待辦事項」（TODOs）範例入手，從零開始介紹Vue的入門知識，包含內插、資料綁定、屬性與樣式綁定和元件的基本概念與用法。

第2章說明如何為Vue建立一個真實的專案化開發的環境，以及專案化環境下協力廠商工具的基本使用與設定，其中包含：vue-cli、webpack、Karma、Phantom、Mocha、Sinon、Chai和Nightwatch。

第3章介紹Vue的路由機制和Vue生態系統中最重要的一個成員：vue-router 的基本使用方法。

第4章透過手機書店範例來介紹元件化理論與Vue元件的設計與實現的實際方法，包含抽象元件的基本方法，如何用Vue對元件進行封裝，如何從介面中分析公共的資料介面，如何在沒有實現服務端的情況下執行Vue程式以及怎樣建立複雜的複合型元件。

第5章全方位地說明Vue的測試與偵錯過程中使用到技術與工具，包含Mocha的使用方法，如何為元件撰寫單元測試，如何在運行期和單元測試中進行偵錯，如何進行端對端測試。

第6章透過一個非常普遍且實用的圖書管理範例，說明Vue在實現一個具有複雜操作的介面時所採用的技術基礎知識，以及Vue元件的進階用法。例如視圖的排序、分頁、尋找，多行刪除的設計與實現，透過表單處理圖書資料的增加、編輯和資料驗證，如何用元件化的設計方法封裝Vue元件以實現大幅的元件重用。

第7章介紹Vue生態結構中針對規模龐大的前端程式進行狀態管理的利器Vuex，透過實例對Vuex的應用原則和結構組成進行剖析，說明如何將各種本來混亂的元件狀態透過Vuex將其進行分離，每個部分應該如何設計與編碼，如何進行測試，最後使Vue前端工程架構變得更為合理。

本書相關原始程式

◎本書原始程式整理——https://github.com/DotNetAge/vue-in-action；

◎vue-todos：第1章例說Vue.js的範例原始程式https://github.com/DotNetAge/vue-todos；

◎vue-shop：第3章路由與頁面間導覽的範例原始程式https://github.com/DotNetAge/vue- shop；

◎vue-curd：第6章視圖與表單的處理的範例原始程式https://github.com/DotNetAge/ vue-curd；

◎V-UIkit：UIkit for Vue2的元件函數庫，構思源於第4章元件化的設計與實現方法的內容https://dotnetage.github.io/vue-ui/；

◎vue-nvd3：以NVD3開發為基礎的Vue2的元件函數庫https://github.com/DotNetAge/vue- nvd3；

◎vue-easy-pie-chart：以easy pie chart開發為基礎的環狀圖元件函數庫https://github.com/ DotNetAge/vue-easy-pie-chart。

繁體中文版說明

本書原作者為中國大陸人士，書中程式碼均託管於Github，原作者不時更新程式碼。為求程式碼之完整，本書畫面均為簡體中文操作，讀者可對照書中文字進行操作。

勘誤和交流

本書如有勘誤，會在https://github.com/DotNetAge/vue-in-action上發佈。由於筆者能力有限，時間倉促，書中難免有錯漏，歡迎讀者批評指正。GitHub：https://github.com/dotnetage

致謝

首先，感謝陳曉猛編輯的鼓勵才能將本書付諸成冊，並在我寫作過程中審閱大量稿件，給予我很多指導和幫助，使本書得以順利出版發行。其次，感謝在我十幾年求學生涯中教育過我的所有老師，是你們將知識和學習方法傳遞給我。感謝我曾經工作過的公司和單位，感謝和我一起共事過的同事和戰友，你們的優秀一直是我追逐的目標，你們所給予的壓力正是我不斷改進自己的動力。

感謝我的父母和兒子。由於撰寫本書，犧牲了很多陪伴家人的時間。感謝你們對我工作的理解和支援。

前 言

寫作背景

我從事軟體開發至今接近18年了，在進入這個產業之前，只有軟體工程師與硬體工程師之分，並無所謂前端工程師或後端工程師之說。前端後端都必須懂，否則根本找不到工作。當然，現在對於前端工程師與後端工程師的劃分是由於軟體技術發展實在太快了，兩個方向已經發展成各自獨立的系統，前端開發由於技術的革新、行動端的崛起，其地位顯得越來越重要。

我是從jQuery 1.0開始真正地接受前端專案化開發概念的，也是從那時對 JavaScript產生一發而不可收的興趣。因為前端專案化能使專案的系統結構更加合理，那些在後端實現起來...

前言
01 例說Vue.js
1.1 內插
1.2 資料綁定
1.3 樣式綁定
1.4 篩檢程式

02 專案化的Vue.js開發
2.1 腳手架vue-cli
2.2 深入vue-cli的專案範本
2.3 Vue專案的webpack設定與基本用法
2.4 基於Karma+Phantom+Mocha+Sinon+Chai的單元測試環境
2.5 以Nightwatch為基礎的點對點測試環境

03 路由與頁面間導覽
3.1 vue-router
3.2 路由的模式
3.3 路由與導覽
3.4 導覽狀態樣式
3.5 History的控制
3.6 關於Fallback
3.7 小結

04 頁面的區塊化與元件的封裝
4.1 頁面邏輯的實現
4.2 封裝可重用元件
4.3 自訂事件
4.4 資料介面的分析與取得
4.5 從服務端取得資料
4.6 建立複合型的範本元件
4.7 資料模擬
4.8 小結
4.9 擴充閱讀：Vue元件的繼承：mixin

05 Vue的測試與偵錯技術
5.1 Mocha入門
5.2 元件的單元測試方法
5.3 單元測試中的模擬技術
5.4 偵錯
5.5 Nightwatch入門

06 視圖與表單的處理
6.1 為Vue2整合UIkit
6.2 表格視圖的實現
6.3 單一職責原則與進階元件開發方法
6.4 表單的設計與實現
6.5 整合服務端的CRUD Restful API
6.6 HTTP攔截器inteceptor
6.7 開發伺服器的訂製

07 Vuex狀態管理
7.1 Vuex的基本結構
7.2 data的替代者：State和Getter
7.3 測試Getter
7.4 Action：操作的執行者
7.5 測試Action
7.6 只用Mutation修改狀態
7.7 測試Mutations
7.8 子狀態和模組
7.9 用服務分離外部操作

附錄A Chai斷言參考
附錄B Vee-Validate驗證規則參考

前言
01 例說Vue.js
1.1 內插
1.2 資料綁定
1.3 樣式綁定
1.4 篩檢程式

02 專案化的Vue.js開發
2.1 腳手架vue-cli
2.2 深入vue-cli的專案範本
2.3 Vue專案的webpack設定與基本用法
2.4 基於Karma+Phantom+Mocha+Sinon+Chai的單元測試環境
2.5 以Nightwatch為基礎的點對點測試環境

03 路由與頁面間導覽
3.1 vue-router
3.2 路由的模式
3.3 路由與導覽
3.4 導覽狀態樣式
3.5 History的控制
3.6 關於Fallback
3.7 小結

04 頁面的區塊化與元件的封裝
4.1 頁面邏輯的實現
4.2 封裝可重用元件...