Vue組件代碼生成平臺

Vue組件代碼生成平臺是一款面向Vue開發(fā)者的拖拽式組件代碼生成工具。通過它可以快速搭建Vue組件的代碼骨架結(jié)構(gòu)。開發(fā)者可在此基礎(chǔ)上進(jìn)行二次開發(fā)。

目前該平臺非常適合快速搭建一個常見的數(shù)據(jù)查詢組件，僅需要拖三個組件進(jìn)來即可完成，例如:

那么它這么牛逼，地址是什么呢？請戳: Low Code Generator

界面及操作介紹

主界面主要分為三塊區(qū)域:

組件庫區(qū)域，組件庫區(qū)域主要用于選擇組件元素。

組件操作預(yù)覽區(qū)域，該區(qū)域主要編輯組件元素的位置與屬性。

實時代碼生成區(qū)域，當(dāng)組件元素被拖入到預(yù)覽區(qū)域時，該區(qū)域會實時生成對應(yīng)的代碼。

一個簡單組件

在熟悉了整個界面的布局之后，我們嘗試來生成一個最簡單的組件。

首先，將鼠標(biāo)指針移動到組件元素的上方，此時該組件元素會有一個淺色的效果。

接著，拖動該組件元素至組件操作預(yù)覽區(qū)域。

然后放下，此時代碼生成區(qū)域?qū)蓪?yīng)的代碼。

接下來我們選中剛剛拖入的組件元素，此時右側(cè)會滑出對應(yīng)的屬性編輯框。在這里我們添加一個@click: onClick屬性以及class: container的屬性，再點(diǎn)擊保存，對應(yīng)的代碼便生成了。

注意: 這時所生成的代碼除了在html中有了對應(yīng)的屬性之外，還會在js中生成對應(yīng)的onClick方法以及在css中生成對應(yīng)的container類。

完整代碼:

<template><div><div div-lc-mark @click="onClick" class="container"></div></div> </template><script>export default {data() {return {// 在此自動生成};},beforeCreate() {},created() {},beforeMount() {},mounted() {},beforeUpdate() {},updated() {},destoried() {},methods: {// 在此自動生成request() {// 網(wǎng)絡(luò)請求，可選},onClick(){}},watch: {},computed: {},fillter: {},}; </script><style scoped>/* 在此自動生成 */.container{} </style>

undefined屬性代表這些元素里面的值。對于div和span等基礎(chǔ)元素來說，如果編輯其undefined屬性，則可以在預(yù)覽區(qū)域以及代碼生成區(qū)域看到實時效果。而對于復(fù)合組件來說，則只能看到代碼區(qū)域的變化。

目前組件代碼生成平臺支持解析部分v-bind、v-on指令，解析成功后可以直接生成對應(yīng)的data或者method。另外也支持class類名的解析。如果有一個class的屬性，則自動會生成對應(yīng)的class。

一個復(fù)合組件

接下來我們將演示如何由基礎(chǔ)組件元素搭建一個復(fù)合組件。

最開始我們還是先拖入一個div元素。然后再拖入一個span，這時這個span可以被放置在div的上方。此時在div上方會有一條綠色的輔助線。

然后釋放，span就會被放置到div的前面。

接來下我們再拖入一個a標(biāo)簽，這次我們選擇將a標(biāo)簽放置到div下面，同樣的會在div的下方出現(xiàn)一條綠色的輔助線。

除了可以將組件元素放置到另一個組件元素的上面下面之外，也支持被放置在它的內(nèi)部，例如:

說明: 在放置組件時可能會遇到像Div這樣的塊級元素也可能遇到像span這樣的行內(nèi)元素，那么如果是div，則只能拖入到它的上方或者下方，如果span，則可以拖入到它的左方或者右方。

此時，我們所生成的代碼為:

<template><div><span> This is span. </span><div div-lc-mark><abbr title="People's Republic of China">PRC</abbr></div><a> W3School </a></div> </template><script>export default {data() {return {// 在此自動生成};},beforeCreate() {},created() {},beforeMount() {},mounted() {},beforeUpdate() {},updated() {},destoried() {},methods: {// 在此自動生成request() {// 網(wǎng)絡(luò)請求，可選},},watch: {},computed: {},fillter: {},}; </script><style scoped>/* 在此自動生成 */ </style>

代碼的導(dǎo)出

當(dāng)把代碼拼接完成之后，可以通過右下方的兩個按鈕將代碼拷貝至剪貼板，也支持直接下載到本地，建議直接下載到項目的目錄中。

預(yù)覽模式

平臺支持預(yù)覽豎屏樣式，默認(rèn)的寬度為375px，點(diǎn)擊開關(guān)便可切換至豎屏模式:

對于組件元素的集成

平臺目前集成了以下幾類組件元素，并做了分類:

• Html原生元素
• Element大部分常見組件
• Vant大部分常見組件
• iView少部分組件

什么樣的組件不能集成

• 組件中有css屬性為position: fixed; 例如vant的Tabbar、SubmitBar等。
• 動態(tài)渲染出來的; 例如Element的Dialog，吐司，消息通知等。

沒有您需要組件庫?

沒關(guān)系，可以通過聯(lián)系我們找到我，然后告訴我需要哪種成熟的組件庫，我將會很快集成。

在組件庫趨于穩(wěn)定好用之后，會考慮將源代碼開放，使大家一起參與建設(shè)。或者可以根據(jù)這個項目搭建屬于您自己的組件搭建平臺。

核心原理介紹

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

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

為了實現(xiàn)以上思路，有幾項關(guān)鍵技術(shù)：

• 對 Vue 組件的解析與生成
• 上下級組件之間的數(shù)據(jù)結(jié)構(gòu)關(guān)系
• html 元素與 Vue 代碼之間吻合的對應(yīng)關(guān)系
• Vue 代碼的關(guān)鍵字解析，如@click
• 將代碼轉(zhuǎn)換為對象，將對象轉(zhuǎn)換為代碼
• 輔助線的定位與繪制

常見問題

期待您來提問。

聯(lián)系我們

如有疑問或者想法建議可通過以下方式聯(lián)系到我:

• 郵件: sahadev@foxmail.com 或 shangbin1@tal.com
• 知音樓: 172332

或者可以在線討論: Gitter IM

總結(jié)

以上是生活随笔為你收集整理的前端开发者的福音！通过拖拽就可生成Vue代码的平台来了！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。