巔云前端雙向可視化布局系統操作手冊V4.0

操作目錄

1. 軟件開發背景 P02

2. 軟件功能說明 P03

3. 軟件安裝使用 P04

4. 功能面板展示 P05

5. 文件目錄結構 P09

6. 特有數據結構 P10

l 軟件開發背景

網頁設計是一個相對復雜的過程。需要美工PS出圖、切片，HTML前端設計師布局（DIV+CSS），JS代碼開發編寫，一個完整的網頁就需要較長的時間才能完成開發。

這時如果我們有一款可視化的布局器，將常用的一些網頁切成功能塊（如文字塊，圖片塊，新聞列表，產品列塊）然后據當前網頁需求將一些塊拼圖式、拖放式擺放到任意位置?？鞄闯鲆粋€網頁來。且實現這些塊的整體樣式及塊內部HTML子元素自由風格定義。

巔云前端可視化布局系統，就是一個實現了完全自定義的、所見即所得的一個非代碼式前端開發工具。大大提高網頁設計速度。

l 軟件功能說明：

巔云前端雙向可視化布局系統V4.0功能介紹：

技術實現

1、系統采用VUE雙向數據綁定機制及NODE.JS打包

2、tinymce可視化文字編輯

3、Ant-design-vue表單元素

4、DIV自由拖拽，獨創網頁定位標尺線，DIV移動輔助線參考線。

5、實現了拖放式增加DIV，右鍵面板、

6、tinymce即時修改DIV內容，設置區域樣式，設置模塊及部件樣式

7、高要擴展性：DIV類型可通過接口動態載入，獨創動態設置模塊內部哪些元素可以設置樣式。

8、快捷方式：模塊有復制，刪除功能

9、高安全：可隨時撤銷恢復。

10、模塊動畫設置、不同類型模塊的私有設置項，風格調用等靈活擴展實現方案。

11、實現了iframe消息傳遞更好的響應式布局方案，多端適配。

 l 軟件安裝：

1、需系統安裝node.js,CD到系統目錄分為innerdemo(內層)，outerdemo（iframe外層）

2、內外層分別運行：npm install及npm run serve及可。

3、訪問方式：http://localhost:8080或8081端口。

黑白雙風格功能界面截圖：

系統目錄結構：

特有數據結構：