前言

sparrow-js 去年實現了視覺化生成原始碼的能力，可以透過選擇物料的方式生成原始碼，生成原始碼後要二次開發怎麼辦？很多人會有這樣的疑問。這次主要嘗試二次開發。在原有程式碼的基礎上實現視覺化開發。

原始碼視覺化

原始碼視覺化：編譯後在瀏覽器訪問的頁面就是視覺化的頁面,讓其處於編輯態即可二次開發。

開發流程，如下圖

現在的開發路徑

物料-》IDE寫程式碼-》構建-》瀏覽器渲染頁面

本文嘗試實現如下開發路徑

物料-》IDE寫程式碼-》構建-》瀏覽器渲染頁面-》物料-》IDE寫程式碼

下面分析下如何啟用瀏覽器渲染頁面，讓其可以處於編輯態。

實現方案：啟用頁面，讓其處於編輯態 以Vue程式碼結構舉例：如下程式碼

<template>  <div class="home">    <div class="s-box" draggable="true"></div>    <s-edit-box></s-edit-box>  </div></template><script>export default {  components: {},  data() {    return {};  },  methods: {},};</script><style lang="scss" scoped></style>

啟用頁面的途徑是解析template，為標籤追加屬性、自動追加編輯元件、人為輸入編輯插槽元件，使其可編輯。在介面上啟用後的呈現demo如下圖：

輸入常規Vue程式碼：

啟用後：追加新元件

選中需要追加的容器，配合sparrow-js裡的物料，將程式碼追加到相對應的檔案位置裡即可

程式碼

程式碼在這裡 https://github.com/sparrow-js/sparrow/blob/master/packages/sparrow-server/src/lib/adapter-vue/modules/generator/Vue2Dynamic.ts 開發中。

開源地址

https://github.com/sparrow-js/sparrow

總結

本文主要分享實現思路，就像去年年初的sparrow-js跟年底呈現出來的完全不一樣，本文可能最終的產物和這篇文章也不一樣，寫著寫著想到更好的思路可能就換方案了。具體的程式碼持續開發中，最終希望呈現結果是讓專案直接在介面端由靜態變為動態可編輯。可以追加程式碼，還在嘗試階段歡迎有緣感興趣人一起交流。