基于Vue的業(yè)務中臺組件設計與實現(xiàn)

李春江 張鵬 李江 郭博陽

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

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

引言

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

1 Vue技術(shù)棧

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

1.1 組件類型

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

1.2 Vue組件化原理

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

2 組件化設計

組件一般劃分為業(yè)務組件和功能組件，業(yè)務組件又分為UI組件和無狀態(tài)組件。

2.1 組件設計原則

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

2.2 組件設計參考點

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

3 組件化的實踐應用

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

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

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

4 結(jié)束語

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