基于Vue的業(yè)務(wù)中臺(tái)組件設(shè)計(jì)與實(shí)現(xiàn)

李春江 張鵬 李江 郭博陽(yáng)

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

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

引言

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

1 Vue技術(shù)棧

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

1.1 組件類型

一般組件分為三種：①頁(yè)面級(jí)別組件，一般在項(xiàng)目頁(yè)面目錄，然后配合路由去使用。②可以復(fù)用的組件。③與業(yè)務(wù)無(wú)關(guān)的獨(dú)立基礎(chǔ)組件。

1.2 Vue組件化原理

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

2 組件化設(shè)計(jì)

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

2.1 組件設(shè)計(jì)原則

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

2.2 組件設(shè)計(jì)參考點(diǎn)

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

3 組件化的實(shí)踐應(yīng)用

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

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

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

4 結(jié)束語(yǔ)

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