拖拽式Vue組件代碼生成平臺(tái)(LCG)

時(shí)間：2023-07-28 12:06:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-28 12:06:01 來源：網(wǎng)站運(yùn)營(yíng)

拖拽式Vue組件代碼生成平臺(tái)(LCG)：拖拽式Vue組件代碼生成平臺(tái)是一款小猴自研的Vue代碼生成工具，英文全稱：Low Code Generator，簡(jiǎn)稱LCG。它也是一種LowCode解決方案。通過它可以快速完成Vue組件的代碼骨架搭建，通過減少不必要的重復(fù)工作從而帶來開發(fā)效率的提升。

體驗(yàn)地址：https://vcc.surge.sh/
項(xiàng)目代碼地址：https://github.com/sahadev/vue-component-creater-ui

出現(xiàn)的背景

做前端久了就難免會(huì)發(fā)現(xiàn)有一些工作其實(shí)是繁復(fù)的，它們有一些共同的特點(diǎn)：

• 頻率高
• 非?；A(chǔ)
• 花費(fèi)時(shí)間

而有一部分工作是可以通過技術(shù)手段解決的，例如在寫Vue時(shí)會(huì)發(fā)現(xiàn)：

• class的名稱需要分別在template和style中定義。
• v-on，v-bind，v-model，v-for等指令的值需要分別在template和script中定義。
• 強(qiáng)烈依賴第三方組件庫的需要打開官網(wǎng)拷貝某個(gè)組件所對(duì)應(yīng)的代碼。

上面三種場(chǎng)景占用了開發(fā)一個(gè)組件所需要使用的相當(dāng)一部分時(shí)間。尤其是第三條，經(jīng)常就是打開官網(wǎng) -> 找到組件 -> 拷貝template -> 拷貝data -> 拷貝method -> 驗(yàn)證效果。如果遇到復(fù)雜組件時(shí)就不知不覺花了不少時(shí)間進(jìn)去。而第一條也需要我們來回在上下文中定義class-name。而這些常見的基本操作如果可以將它們的共性提取出來，那么我們就有辦法通過技術(shù)手段大幅縮短這部分時(shí)間。這就為L(zhǎng)CG的出現(xiàn)提供了需求背景。

作者之前是寫Android的，對(duì)Android的拖拽式布局印象很深刻。因?yàn)橥献П旧硭枰ㄙM(fèi)的時(shí)間是所有編碼操作中最少的。

所以想法一結(jié)合，誕生了LCG。

使用它可以完成什么

目前LCG集成了HTML5的基本元素以及Element UI常見的平面組件，所以目前可以通過LCG完成常見的表格與表單。這里列舉一些具有代表性的頁面：

LCG同樣支持搭建移動(dòng)端的頁面，只需要將相應(yīng)的組件庫集成即可。

快速生成一個(gè)這樣的查詢表格：

也可以快速搭建一個(gè)這樣的數(shù)據(jù)提交表單：

當(dāng)然，搭建成為什么樣的頁面完全取決于開發(fā)者，上面兩張圖只是一個(gè)效果示意。LCG的主要能力在于它所生成的代碼。

LCG會(huì)自動(dòng)將各個(gè)組件按照SFC文件的結(jié)構(gòu)拼接在一起，并且會(huì)把data、method、class的聲明也創(chuàng)建好。有了這樣一個(gè)骨架結(jié)構(gòu)，開發(fā)者便可以將代碼下載至項(xiàng)目目錄，在此基礎(chǔ)上進(jìn)行二次開發(fā)。

這個(gè)骨架創(chuàng)建過程完全不需要打開Element UI官網(wǎng)進(jìn)行一個(gè)個(gè)組件代碼拷貝這樣繁復(fù)的過程，只需拖拽幾下就搞定了。

使用它可以帶來的收益

雖然帶來了很明顯的效率提升效果，但還是需要一個(gè)數(shù)據(jù)來表達(dá)一下究竟可以節(jié)約多少時(shí)間。

還是以上面的查詢表格為例。作者分別通過常規(guī)的方式和通過LCG的方式做一下數(shù)據(jù)比對(duì)。

常規(guī)方式：

LCG：

通過以上兩個(gè)視頻可以看到，LCG總共用時(shí)99秒，而常規(guī)方式總共用時(shí)205秒。因此LCG相比較常規(guī)方式提效至少在100%以上，因?yàn)長(zhǎng)CG不要起本地服務(wù)就可以看到實(shí)時(shí)效果。兩者的時(shí)間差值隨著組件的復(fù)雜度增加而增加。

視頻介紹

下面是一個(gè)基本版的視頻介紹：

基本原理

我們知道，在編寫后的 vue 代碼在運(yùn)行時(shí)會(huì)生成實(shí)際的 Html 代碼，而組件生成平臺(tái)的職責(zé)是將這些 Html 再轉(zhuǎn)換為 vue 代碼，并組合在一起。

為了達(dá)到這樣的目的，我們目前采用的思路是：將原始的代碼文件進(jìn)行預(yù)編譯：對(duì)指定的vue組件分配一個(gè)隨機(jī) ID，并將這個(gè)vue文件的代碼結(jié)構(gòu)轉(zhuǎn)換為以JavaScript對(duì)象表示的結(jié)構(gòu)，以ID: Structure的形式存儲(chǔ)于 JS文件中。在運(yùn)行時(shí)，將此JS文件加載進(jìn)內(nèi)存。當(dāng)拖動(dòng)某個(gè)被lc-mark標(biāo)記的元素時(shí)，我們可獲得這個(gè)元素相應(yīng)的ID，再通過這個(gè)ID查找對(duì)應(yīng)的Structure。當(dāng)拖入到某個(gè)元素中時(shí)，也通過相同的方式獲得目標(biāo)元素的原始代碼，再將這兩部分原始代碼合并，并建立上下級(jí)關(guān)系。隨后，通過新的代碼結(jié)構(gòu)，分析對(duì)應(yīng)的@click、v-model、class等我們所關(guān)注的屬性，然后再將其生成對(duì)應(yīng)的代碼插入到將要生成的Vue組件模板中。至此，便形成了一個(gè)較為完整的Vue組件代碼。

現(xiàn)有的能力

可以從以下幾個(gè)點(diǎn)來描述LCG現(xiàn)有的能力：

*組件庫*：目前LCG集成了常用的Html5元素以及Element UI大部分組件。

*組合形式*：目前支持將一個(gè)組件插入到另一個(gè)組件的前面、里面、后面。

*生成結(jié)果*：目前除了支持自動(dòng)提取class之外還支持自動(dòng)生成template中通過以下指令所聲明的data以及method（包括但不限于）：

• v-bind或:
• v-for
• v-if
• v-model
• v-on或@
• {{ Mustache }}

*屬性預(yù)置*：由于每個(gè)組件的屬性繁多，無法將每種組合的組件都預(yù)置完全，所以有一部分組件預(yù)置了屬性。比如el-pagination，它在組件庫中是通過基礎(chǔ)用法表示的，而當(dāng)被拖入到操作區(qū)域后，它在預(yù)覽區(qū)域展示的是完整功能。這是因?yàn)樗煌先牒笤黾恿艘恍╊A(yù)置屬性。如果你不要它，則可以在屬性編輯時(shí)將這些預(yù)置屬性刪除。

*兄弟組件快速復(fù)制*：有一些組件在使用時(shí)的個(gè)數(shù)是不確定的，比如el-radio、el-checkbox等，所以LCG提供了兄弟組件快速復(fù)制的能力。當(dāng)把鼠標(biāo)移動(dòng)至這類組件上時(shí)，就會(huì)出現(xiàn)一個(gè)小加號(hào)(?)，然后點(diǎn)擊這個(gè)加號(hào)邊可以快速復(fù)制一個(gè)兄弟組件。支持復(fù)制兄弟組件的組件有：

• el-checkbox
• el-radio
• el-option (在檢視圖中復(fù)制)
• el-table-column (在檢視圖中復(fù)制)

*代碼結(jié)構(gòu)檢視*：有一些脫離文檔流的組件是無法直接在操作區(qū)域看到的，比如el-option這種下拉選項(xiàng)。所以LCG提供了結(jié)構(gòu)檢視圖的能力。通過結(jié)構(gòu)檢視圖可以看到template中各個(gè)組件結(jié)構(gòu)的層級(jí)關(guān)系。并且也可以對(duì)el-option這種看不到的組件進(jìn)行屬性編輯。在結(jié)構(gòu)檢視圖中除了可以編輯組件的基本屬性外，還可以對(duì)el-option、el-table-column這些組件進(jìn)行兄弟組件復(fù)制。但需要注意的是：在這種模式下不支持刪除組件。

特點(diǎn)

可以說LCG的特點(diǎn)是：

• 組件庫強(qiáng)大，支持各類Vue組件庫。
• 組合形式多樣，支持各種組合。
• 生成結(jié)果豐富，支持無限擴(kuò)展各種指令以及v-bind、v-on。

做不到哪些以及需要注意的

因?yàn)閷?shí)現(xiàn)機(jī)制的原因，有一些是目前LCG無法做到的：

- 操作區(qū)域效果同步更新。這里是指如果編輯的是一個(gè)Html5元素的話，那么操作區(qū)域以及實(shí)時(shí)預(yù)覽區(qū)域的效果都會(huì)更新。但如果是復(fù)雜的組件（實(shí)現(xiàn)層級(jí)超過兩級(jí)），則只能在預(yù)覽區(qū)域看到效果。

- 無法組合非平面組件的結(jié)構(gòu)。以Dialog舉例，因?yàn)镈ialog本身不是文檔流的一部分，所以在對(duì)Dialog進(jìn)行結(jié)構(gòu)表示時(shí)獲取不到本身的DOM結(jié)構(gòu)，所以無法直接將內(nèi)部的內(nèi)容放入到Dialog中。而是需要將內(nèi)容放置到Dialog前面或者后面，然后再在本地編輯器中調(diào)整其正確的結(jié)構(gòu)。

- 某些組件無法選中。部分組件因?yàn)閷?shí)現(xiàn)邏輯的原因，沒有將id屬性掛載到組件的根節(jié)點(diǎn)上，所以會(huì)導(dǎo)致在操作區(qū)域點(diǎn)擊這個(gè)組件出現(xiàn)無法選中的現(xiàn)象。這種情況可通過組件檢視圖更新該組件的屬性。目前已知有這種現(xiàn)象的組件有：el-switch、el-time-select。

沒有集成的ElementUI組件

• Divider 分割線
• InfiniteScroll 無限滾動(dòng)
• Notification 通知
• MessageBox 彈框
• Message 消息提示
• Loading 加載
• Backtop 回到頂部

聯(lián)系我們

如果您對(duì)LCG有任何的想法與建議，可以通過郵件：sahadev@foxmail.com或shangbin1@tal.com

或者可以在線討論：