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>

代碼的導出

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

對於組件元素的集成

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

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 組件代碼。

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