基於 vue 的移動端頁面可視化搭建工具思路

前言

首先我認可我標題黨了。。。與其說是可視化搭建工具，不如說是可視化生成頁面配置工具，即用拖拽的方式生成頁面配置，再經過框架的動態組件的方式，基於配置，生成頁面。

如今的公司，一個個都開始整本身的組件庫，組件庫搭建好之後，經過業務積累、聚合基礎組件及抽象部分業務代碼，又會產出複用性比較高的區塊庫，而可視化搭建，就是基於區塊庫來實現的。

先說個缺點，比較難應對邏輯複雜的場景以及多變的產品需求。。。

背景介紹

平常開發中發現公司不少小的項目長得都差很少，甚至有些頁面就是把其餘頁面的各個模塊換個數據，堆在一塊兒就出了一個新頁面，且在運營活動頁中尤其常見，而這種大同小異的活動頁，若是能讓運營本身拖拖拽拽就搭出來，豈不美吱吱。

方案設計

首先想了一下，頁面應該是這個結構的

整個邏輯應該是這樣的

• 左邊列表點一下，組件會出如今中間的位置
• 中間多個組件能夠拖拽進行排序
• 可能有些組件須要嵌套，須要實現經過拖拽，能夠把子組件塞到容器組件裏的功能
• 從中間點擊單個組件，能夠在右側展開該組件的配置項
• 右側修改後，中間實時呈現效果

頁面效果

簡單頁面擼完以下

左側是基於一個配置文件，生成的組件列表。

中間是嵌套了一個 iframe，與外部經過 postMessage 通訊。（原本想畫個 iphone6 長相的手機，結果畫了半天仍是有點像 5s）

右側是配置組件的位置，效果後面貼圖。

拖拽部分使用 vuedraggable 實現，好用到爆炸。

再來個動態圖

能夠看到基本功能都已經實現了，右側的配置位置能夠處理 String、Number、Boolean、Array、Object 類型的數據

小結

項目還只是個半成品，主要是一個思路，其實配置生成後還能夠作不少，好比

• 配置中的數據填充由後端實現
• 基於配置，可經過多個框架實現最終的頁面，只須要根據約定設定組件名，並將數據經過 props 傳遞給組件便可，vue、react 甚至小程序，均可以基於配置生成頁面。
• ...

你們有其餘的想法能夠一塊兒討論哈

丟個 Gayhub 地址，代碼略醜，以爲有點意思的話麻煩給個 star：

github.com/Lzzzzzq/vue…

參考文章

《有讚美業店鋪裝修前端解決方案》