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

2021-09-24 07:18:57 字數 772 閱讀 2544

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

現在的公司,乙個個都開始整自己的元件庫,元件庫搭建好以後,通過業務積累、聚合基礎元件及抽象部分業務**,又會產出復用性比較高的區塊庫,而視覺化搭建,就是基於區塊庫來實現的。

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

日常開發中發現公司很多小的專案長得都差不多,甚至有些頁面就是把其他頁面的各個模組換個資料,堆在一起就出了乙個新頁面,且在運營活動頁中尤為常見,而這種大同小異的活動頁,如果能讓運營自己拖拖拽拽就搭出來,豈不美吱吱。

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

整個邏輯應該是這樣的

簡單頁面擼完如下

左側是基於乙個配置檔案,生成的元件列表。

中間是巢狀了乙個 iframe,與外部通過 postmessage 通訊。(本來想畫個 iphone6 長相的手機,結果畫了半天還是有點像 5s)

右側是配置元件的位置,效果後面貼圖。

拖拽部分使用 vuedraggable 實現,好用到**。

再來個動態圖

可以看到基本功能都已經實現了,右側的配置位置可以處理 string、number、boolean、array、object 型別的資料

專案還只是個半成品,主要是乙個思路,其實配置生成後還可以做很多,比如

大家有其他的想法可以一起討論哈

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

基於vue的視覺化程式設計

vue layout用了muse ui 感覺還不錯。vue layout 流程學習 編譯流程 參考文件 中間preview 最右側控制項列表 components.vue mu select field muse ui mint ui iview ui 我們來看mu select field 這個m...

vue design 桌面端頁面視覺化構建程式

用vue和electron開發最好的頁面視覺化構建程式 本專案的初衷有二 對於第一點,相信不少大公司有很多實踐。例如阿里開源的ice工具走得是 塊復用的思路,非常值得借鑑。而對於第二點,目前開源的也有不少專案,但都是基於web的。在我看來,視覺化構建需要和檔案進行強互動,所以我選擇了vue和elec...

基於caffe的特徵視覺化

lian jie 最近想看一看卷積神經網路中各層的卷積結果,但在網上搜尋feature visualization並沒能找到通俗易懂的內容。在caffe的官網教程中,有這麼乙個instant recognition with caffe,參照它可以很快的做出視覺化的結果。但感覺裡面還是稍有些複雜,這...