gif 錄製效果不佳，可以訪問以下鏈結進行體驗。
前端開發元件庫，完善元件型別，編輯器讀取元件完成頁面搭建，將頁面資料傳送至服務端儲存。 訪問頁面，從服務端拉取頁面資料，前端渲染頁面即可。
|____plugins ## 元件庫管理
|____editor.tsx ## 編輯器
|____type.ts ## 型別定義
|____components
| |____pannel ## 左側元件面板
| |____preview ## 中間預覽面板
| |____editor ## 元件編輯器實現
| | |____index.tsx
| | |____propseditor
| | | |____index.tsx
| | | |____components
| | | | |____switcheditor
| | | | |____radioeditor
| | | | |____imgeditor
| | | | |____coloreditor
| | | | |____texteditor
| | | | |____textareaeditor
| | | | |____numbereditor
| | | |____rendereditoritem.tsx
| | | |____unioneditor.tsx
| | |____functioneditor
| | |____settingeditor
|____renderpage.tsx
既然是視覺化頁面搭建，那麼頁面必須可以以某種資料結構進行描述。比如：
// 頁面設定
components: ; // 頁面使用到的元件
}
import react from 'react';
export const title = () => ;
title.defaultprops = ;
title.schema =
};
schema:
}
react 元件的 props，這裡使用defaultprops賦值預設值
對應props各個屬性的描述，用於編輯器針對進行渲染。進行元件編輯，實際上編輯的是元件的props，props改變元件的渲染結果自然改變。為了對props進行編輯，需要定義props的描述語言，通過props描述來進行屬性編輯。這裡使用如下的schema。
props.title，通過type可以決定如何渲染編輯器元件。
可能光能渲染元件是不夠的，也許需要更多的功能包裝，比如埋點。這一類函式本質上也是元件。可以通過schema定義進行props編輯。舉個例子：
import react from 'react';
export const tracking = () => ;
return ;};
tracking.defaultprops = ;
tracking.schema = ,
pagesn: ,
pageelsn:
};
github：傳送門
在client和server分別執行yarn dev即可。
Hbase視覺化操作頁面
問題是前端如何把乙個可變的量傳給後台來接收並且判斷 下面是我寫的 有大佬可以解決這個問題嗎 hbase 建立表 表名 列族版本號 列族版本號 string tablename request.getparameter tablename string columnname request.getpa...
前端視覺化頁面自適應
整體布局 flex 百分比，從內到外都用百分比 css最小寬高設定 min width min height，在頁面過小時增加滾動條 box sizing border box css字型設定 rem margin padding vh vw echarts圖表字型 自定義乙個fontsize nu...
vue design 桌面端頁面視覺化構建程式
用vue和electron開發最好的頁面視覺化構建程式 本專案的初衷有二 對於第一點，相信不少大公司有很多實踐。例如阿里開源的ice工具走得是 塊復用的思路，非常值得借鑑。而對於第二點，目前開源的也有不少專案，但都是基於web的。在我看來，視覺化構建需要和檔案進行強互動，所以我選擇了vue和elec...