文/呂英華

實際項目中的最大挑戰(zhàn)是前端業(yè)務日益復雜化和多元化促使項目周期快速演進迭代。隨著時間的推移，業(yè)務需求的推進，項目的體系和形態(tài)發(fā)生了復雜的變化，會產生如下的問題：

（1）最初的架構不再支持后續(xù)的變化，若在原有的架構進行迭代更新，會使代碼更冗余，若重構整個項目，無法避免項目風險與資損。

（2）因項目不斷的迭代更新，開發(fā)周期加長，經多人開發(fā)和維護，出現(xiàn)代碼質量低、可維護性差、可用性差等問題。

（3）在多人協(xié)作開發(fā)時，沒有統(tǒng)一的規(guī)范，無法進行高效的、高質量的協(xié)作開發(fā)。

以上問題可前端工程化的思想去解決。前端工程化本質上也是軟件工程的一種，軟件工程化主要關注可用性、可維護性、性能穩(wěn)定性等方面。前端工程化包括模塊化、組件化、規(guī)范化、自動化四個特點。模塊化不等于組件化，模塊化是對資源的拆分，組件化是在設計層面上或用戶界面上的拆分。模塊化是將一個大文件拆分成相互依賴的小文件，再進行統(tǒng)一的組裝和加載；組件化是從用戶界面上進行拆分，拆分后的每個組件包含結構（HTML）、樣式（CSS）和邏輯（JavaScript）；規(guī)范化是項目可持續(xù)開發(fā)的重要條件，其包括目錄結構的制定、文檔規(guī)范、編碼規(guī)范、各種工具使用管理等內容；自動化是提高工作效率的重要條件，通過自動化工具完成持續(xù)集成、構建、部署、測試等工作。

本文工作的意義在于闡述Vue 的全家桶能自動化構建、部署具有可維護性、性能穩(wěn)定的項目，實現(xiàn)項目的模塊化、組件化和規(guī)范化，且Vue 的全家桶滿足前端工程化的思想。

1 Vue全家桶的工具分析

在實際項目中，為了提高項目的即時效益，常常會降低項目的工程化去縮短開發(fā)周期，這會給后期的開發(fā)和維護增加難度。為了快速初識化一個具有前端工程化思想的項目，Vue全家桶提供了快速開發(fā)項目的工具、狀態(tài)管理工具、路由工具、請求工具及UI 框架等。

1.1 快速開發(fā)項目工具

Vue CLI 是一個具有完全圖形化界面和基于Vue.js 進行快速開發(fā)的完整系統(tǒng)。Vue CLI提供搭建、管理、開發(fā)交互式項目的手腳架；Vue CLI 服務是基于Webpack 和Webpack-Dev-Server 之上構建的，不僅能加載其官方提供的插件，還能加載其他CLI 插件的核心服務；最重要的是，可以靈活調整每個工具的配置，無需eject,節(jié)省配置時間。

1.2 狀態(tài)管理工具

Vuex 是專門為Vue.js 設計、以利用Vue.js 的細粒度數(shù)據(jù)響應機制來進行高效的狀態(tài)更新的狀態(tài)管理庫，其基本思想借鑒了Flux、Redux 和The Elm Architecture。Vuex 應用的核心是Store（倉庫），類似于一個容器，存儲該應用的大部分的狀態(tài)（State）。Vuex 的狀態(tài)（State）類似于全局變量，該變量提供給多個模塊使用，但又區(qū)別于單純的全局變量，因狀態(tài)儲存是響應式的，如修改了Vuex 的某個狀態(tài)，依賴于該狀態(tài)的組件都會高效更新，且不能直接修改Store 里的狀態(tài)，需要顯式提交給Mutation。Vuex 的Store 具有五個核心概念，分別為定義狀態(tài)（State）、獲取狀態(tài)（Getter）、修改狀態(tài)（Mutation）、觸發(fā)Mutation 的函數(shù)（Action）、將Store 分割成模塊（Module）。

1.3 路由工具

Vue Router 是Vue.js 官方的路由管理器,是用來構建和管理spa(單頁面)應用的。傳統(tǒng)的項目大多為多頁面結構，即一個項目由多個HTML 文件構成，在進行多頁面跳轉時，常受網絡、性能等影響，會出現(xiàn)不同時長的空白頁面，用戶體驗不好。單頁面（spa）的核心思想為只有一個完整的頁面，更新加載視圖只需加載更新某個組件，不需要重新請求加載整個頁面。Vue Router 通過改變路徑實現(xiàn)組件之間的切換和跳轉，并增加查詢與設置路由參數(shù)、視圖過度的效果、自定義滾動條行為等內容。

1.4 請求工具

一個完整的Vue 項目需要向服務器請求數(shù)據(jù)，Vue.js 是基于JavaScript 開發(fā)的，常用的Ajax 也是可以使用的，在Vue 2.0 版本之前，官方推出Vue Resource，但之后不再維護更新，現(xiàn)官方推薦使用Axios。Axios 是第三方插件，不僅能在Vue 里使用，還能在Nodejs、React中使用。需要使用Axios 請求的Vue 組件，使用import 導入即可。

1.5 UI框架

Vue 的UI 框架分為PC 端和移動端兩種，可以根據(jù)項目需求選擇合適的UI 框架。PC 端有餓了么出品的ELement、基于Vue 開源的組件庫iview、三端樣式一致的響應式UI庫muse-ui 等，移動端有Vux、餓了么出品的Mint-UI、有贊出品的Vant 等。每個支持Vue的UI 框架都存在不極致的地方，但豐富了Vue 的UI 環(huán)境，開發(fā)者可以根據(jù)需求選擇其一或多個UI 庫協(xié)同合作。

2 Vue全家桶應用分析

在使用Vue 的全家桶搭建一個項目前需提前安裝Node、Npm 和Webpack。

2.1 Vue CLI的應用

Vue CLI 只需5 分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生產環(huán)境的構建配置的項目。使用Vue CLI 的前提是已安裝Webpack 和8.9 版本以上的Node。Vue.js 官方提供兩個版本的Vue CLI，分別是2.X 版本和3.X 版本，本文主要描述3.X 版本的Vue CLI 應用。

（1）全局安裝手腳架，初始化項目所需的環(huán)境：npm install -g @vue/cli。安裝完之后通過vue --version 檢驗是否安裝成功。手腳架一般具有自動構建代碼、本地開發(fā)與調試，熱替換與熱加載、CSS 模塊化等功能。

（2）構建一個新項目，可以選擇默認的preset 和手動選擇的preset：vue create myproject。手動選擇配置面向生產的項目，提供更多的選項，目前手動選擇設置提供了添加依賴、單獨配置文件、保存當前配置等配置內容。Vue 還提供了vue ui 命令以圖形化界面創(chuàng)建和管理項目。

（3）基于項目需求安裝依賴：npm add **。以此命令安裝的插件會在package.json 文件中列出來，以查看安裝情況和項目移動后一鍵安裝所有插件使用。

（4）啟動開發(fā)服務器并附帶開箱即用的模塊熱重載：npm run serve。啟動服務器后默認打開瀏覽器窗口，端口號為8080。Vue 提供兩種方式修改服務器的配置，一是通過命令行vue-cli-service serve [options][entry]修改，二是通過修改vue.config.js 文件的配置。

（5）打包編譯程序：npm run build。此命令會在dist/目錄下產生一個可用于生產環(huán)境的包，帶有JS/CSS/HTML 的壓縮和為緩存而做的自動的vendor chunk splitting，包的chunk manifest 內聯(lián)在HTML 文件里。

2.2 Vuex的應用

一個應用的前端頁面可以千變萬化，但數(shù)據(jù)一直是支撐應用的最重要部分。在Vue應用中，Vuex 就充當了數(shù)據(jù)提供者的角色，Vue 則只需要關注頁面的展示與交互。Vuex的Store 具有五個核心概念，分別為State、Getter、Mutation、Action、Module，分別分析每個功能。

（1）State:存儲狀態(tài)（變量）。只能訪問狀態(tài)，不能修改狀態(tài)。當Store 實例注入到根組件下，如需訪問某個狀態(tài)時子組件通過this.$store 訪問，如需訪問多個狀態(tài)，可以通過mapState 輔助函數(shù)生成計算屬性。

（2）Getters：store 的計算屬性，用來修飾狀態(tài)，并不修改狀態(tài)。

Getters 的第一個參數(shù)為state,第二個參數(shù)可以為其他Getter。子組件可以通過store.getters 對象訪問。

（3）Mutation：修改Store 狀態(tài)的唯一途徑。Mutation 類似JavaScript 中事件，具有事件類型和回調函數(shù)，子組件可以通過store.commit(‘type’,’parameter’)調用。

（4）Action：類 似mutation,Mutation可以直接修改Store 狀態(tài)，Action 需要調用Mutation 的方法去修改Store 的狀態(tài)，屬于異步操作。

（5）Module：當狀態(tài)存儲過多時，Store會變得臃腫，故Module 可以將Store 對象分割成多個模塊，每個模塊擁有自己的State、Mutation、Action、Getters。

2.3 Vue Router

前端路由的核心在于改變視圖的同時不向后端發(fā)出請求，瀏覽器提供了兩種方式去實現(xiàn)，分別為hash 和history。Hash，即URL 中的#符號，如http://www.abc.com/#/abc，hash值為#/abc。雖然URL 帶有hash 值，但是不會被帶入HTTP 請求中，因此改變hash 值不會重新加載頁面。History 利用了HTML5 History Interface 中 的pushState() 和replaceState() 方法，應用于歷史記錄棧，具有對歷史記錄修改的功能。Vue Router 利用了這兩種方式實現(xiàn)前端路由跳轉，其默認為Hash 模式，如果使用History 模式，需要后端配置支持。

3 總結

Vue CLI 是Vue 的手腳架工具，可以自動生成項目目錄，配置WebPack，安裝各種依賴包，管理各種資源，具有前端工程化的自動化特點；通過Vue 構建單頁面的應用，用Vue Router 對頁面進行局部無刷新的替換，用Vuex 對應用中的各種狀態(tài)進行管理，具有前端工程化的模塊化、組件化的特點；Vue 的全家桶具有完善的功能和API 文檔，給Vue 的開發(fā)者提供規(guī)范的開發(fā)環(huán)境，這就是前端工程化的規(guī)范化特點。這就是Vue 的全家桶可以解決因前端業(yè)務日益復雜等原因引起的問題。