Vue組件代碼生成平臺

Vue組件代碼生成平臺是一款面向Vue開發者的拖拽式組件代碼生成工具。通過它可以快速搭建Vue組件的代碼骨架結構。開發者可在此基礎上進行二次開發。

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

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

界面及操作介紹

主界面主要分為三塊區域:

組件庫區域，組件庫區域主要用于選擇組件元素。

組件操作預覽區域，該區域主要編輯組件元素的位置與屬性。

實時代碼生成區域，當組件元素被拖入到預覽區域時，該區域會實時生成對應的代碼。

一個簡單組件

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

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

接著，拖動該組件元素至組件操作預覽區域。

然后放下，此時代碼生成區域將會生成對應的代碼。

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

注意: 這時所生成的代碼除了在html中有了對應的屬性之外，還會在js中生成對應的onClick方法以及在css中生成對應的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() {// 網絡請求，可選},onClick(){}},watch: {},computed: {},fillter: {},}; </script><style scoped>/* 在此自動生成 */.container{} </style>

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

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

一個復合組件

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

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

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

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

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

說明: 在放置組件時可能會遇到像Div這樣的塊級元素也可能遇到像span這樣的行內元素，那么如果是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() {// 網絡請求，可選},},watch: {},computed: {},fillter: {},}; </script><style scoped>/* 在此自動生成 */ </style>

代碼的導出

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

預覽模式

平臺支持預覽豎屏樣式，默認的寬度為375px，點擊開關便可切換至豎屏模式:

對于組件元素的集成

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

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

什么樣的組件不能集成

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

沒有您需要組件庫?

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

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

核心原理介紹

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

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

為了實現以上思路，有幾項關鍵技術：

• 對 Vue 組件的解析與生成
• 上下級組件之間的數據結構關系
• html 元素與 Vue 代碼之間吻合的對應關系
• Vue 代碼的關鍵字解析，如@click
• 將代碼轉換為對象，將對象轉換為代碼
• 輔助線的定位與繪制

常見問題

期待您來提問。

聯系我們

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

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

或者可以在線討論: Gitter IM

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。