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

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

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

1. 元件庫區域，元件庫區域主要用於選擇元件元素。
2. 元件操作預覽區域，該區域主要編輯元件元素的位置與屬性。
3. 實時程式碼生成區域，當元件元素被拖入到預覽區域時，該區域會實時生成對應的程式碼。

在熟悉了整個介面的佈局之後，我們嘗試來生成一個最簡單的元件。

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

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

然後放下，此時程式碼生成區域將會生成對應的程式碼。

接下來我們選中剛剛拖入的元件元素，此時右側會滑出對應的屬性編輯框。在這裡我們新增一個@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
• 將程式碼轉換為物件，將物件轉換為程式碼
• 輔助線的定位與繪製

期待您來提問。

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

• 郵件: [email protected] 或 [email protected]
• 知音樓: 172332