基于Vue的業務中臺組件設計與實現

李春江 張鵬 李江 郭博陽

1. 中國煤炭地質總局航測遙感局 陜西 西安 710199；

2. 陜西省地理空間信息工程技術研究中心 陜西 西安 710199

引言

Web應用是整個互聯網與軟件行業的重要組成部分。本文通過對Vue Component和ES6的深入研究，結合業務角度的實際需求，研究并開發了一套具有通用性的組件，便于在其基礎上進行二次開發的解決方案。該方案運用前后端分離的MVVM軟件架構設計模式，漸進式JavaScript框架Vue.js、Webpack構建技術、Element-UI等技術棧。該方案為企業信息化通用開發框架，即企業總部及下屬分公司的其他開發團隊采用該方案開發自己需要的業務系統，開發者將重點放在與系統產品有關的具體業務邏輯的設計與開發上。

1 Vue技術棧

本課題將運用當前比較優秀的MVVM開發模式，以及主流前端開發框架Vue2.0、Vue-router、Vuex、ES6語法、Webpack自動構建技術，使用axios來請求接口，實現前后端分離，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助企業快速搭建企業級中后臺產品原型[1]。

1.1 組件類型

一般組件分為三種：①頁面級別組件，一般在項目頁面目錄，然后配合路由去使用。②可以復用的組件。③與業務無關的獨立基礎組件。

1.2 Vue組件化原理

Vue通過全局注冊和局部注冊兩種方式來注冊組件。全局組件可以在任何(根)實例中使用，一般使用 Vue.component和Vue.extend 來注冊。局部組件只能在特定域下才能使用。

2 組件化設計

組件一般劃分為業務組件和功能組件，業務組件又分為UI組件和無狀態組件。

2.1 組件設計原則

在組件的設計中，需要考慮以下幾點：①可擴展性強：擴展性是我們要考慮的重點，如果不能擴展，就失去了代碼的靈活性。②組件中方法函數的抽離，便于復用（盡可能使用方法定義，避免使用Template表達式）。③適度抽象，盡量保證一個組件完成的功能是單一。④顆粒度合適，系統功能被精細到各個獨立的組件中。

2.2 組件設計參考點

①組件間props原子化：父子組件通過props屬性傳值時，盡可能的規定數據類型并且使用原始類型的數據。②巧妙利用slot擴展組件：用好slot可以設計出很多優秀的組件。③合理使用mixin實現復用：Mixins封裝可重用的代碼，避免重復[2]。

3 組件化的實踐應用

組件化是為生產服務的，一切脫離生產環境的設計都是徒勞的。下面從業務角度出發進行組件封裝，以此說明組件化在企業開發中的應用。

（1）彈框組件。如下圖所示，我們對ElementUI彈框組件進行個性化封裝：彈框組件頭部進行了設計；內容區通過插槽Slot占位；文本可配置方便國際化；操作區域進行了按鈕自定義事件派發；并對彈框打開關閉進行了簡單的業務封裝，這樣頁面只負責業務的處理，把彈框的一些屬性事件封裝起來。

（2）列表組件。如下圖所示，Web項目實際開發過程中，列表展示會頻繁使用，而且往往需要個性化設計，為了提升開發效率并減少代碼的冗余，所以需要對ElementUI的表格分頁組件進行二次封裝。二次封裝列表后頁面代碼量明顯減少很多，代碼可讀性增強，部分代碼如下：

4 結束語

本文通過對組件化深入研究，總結出一套企業開發后臺管理系統組件設計方案。該方案以業務為出發點，封裝了常用可復用的業務組件，提升了企業開發效率。項目維護通過方便的組件管理系統及組件安裝方式將所有的項目中的組件拍平，形成一個大的組件池，解決跨項目共用組件的難度。