前言
首先我承認我標題黨了。。。與其說是視覺化搭建工具，不如說是視覺化生成頁面配置工具，即用拖拽的方式生成頁面配置，再通過框架的動態元件的方式，基於配置，生成頁面。
現在的公司，一個個都開始整自己的元件庫，元件庫搭建好以後，通過業務積累、聚合基礎元件及抽象部分業務程式碼，又會產出複用性比較高的區塊庫，而視覺化搭建，就是基於區塊庫來實現的。
先說個缺點，比較難應對邏輯複雜的場景以及多變的產品需求。。。
背景介紹
日常開發中發現公司很多小的專案長得都差不多，甚至有些頁面就是把其他頁面的各個模組換個資料，堆在一起就出了一個新頁面，且在運營活動頁中尤為常見，而這種大同小異的活動頁，如果能讓運營自己拖拖拽拽就搭出來，豈不美吱吱。
方案設計
首先想了一下，頁面應該是這個結構的
整個邏輯應該是這樣的
- 左邊列表點一下，元件會出現在中間的位置
- 中間多個元件可以拖拽進行排序
- 可能有些元件需要巢狀，需要實現通過拖拽，可以把子元件塞到容器元件裡的功能
- 從中間點選單個元件，可以在右側展開該元件的配置項
- 右側修改後，中間實時呈現效果
頁面效果
簡單頁面擼完如下
左側是基於一個配置檔案，生成的元件列表。
中間是巢狀了一個 iframe，與外部通過 postMessage 通訊。（本來想畫個 iphone6 長相的手機，結果畫了半天還是有點像 5s）
右側是配置元件的位置，效果後面貼圖。
拖拽部分使用 vuedraggable 實現，好用到爆炸。
再來個動態圖
可以看到基本功能都已經實現了，右側的配置位置可以處理 String、Number、Boolean、Array、Object 型別的資料
小結
專案還只是個半成品，主要是一個思路，其實配置生成後還可以做很多，比如
- 配置中的資料填充由後端實現
- 基於配置，可通過多個框架實現最終的頁面，只需要根據約定設定元件名，並將資料通過 props 傳遞給元件即可，vue、react 甚至小程式，都可以基於配置生成頁面。
- ...
大家有其他的想法可以一起討論哈
丟個 Gayhub 地址，程式碼略醜，覺得有點意思的話麻煩給個 star：