yumeisoft-FrontendBlocks可視化前端低代碼設計器

FrontendBlocks 是一款強大的所見即所得前端頁面設計器，是低代碼開發(fā)領(lǐng)域的基礎建設，生成的代碼不依賴于任何框架，實測可以將前端布局工作的耗時減少80%以上，最關(guān)鍵的是，它實現(xiàn)了人人都可以寫前端頁面的夢想。 不用寫一行代碼即可讓設計師、前端開發(fā)人員輕松設計出前端代碼的利器，100%還原設計稿不再是夢。對于Uniapp開發(fā)非常友好，可以快速生成組件和頁面。 本軟件可以生成HTML5代碼、按2x生成手機端VUE代碼、按1x生成電腦端VUE代碼，也可以直接生成JSON串，供其他開發(fā)工具（包括自主研發(fā)的）進行二次加工。 本軟件采用Apache 2.0協(xié)議開源，可以免費商用。如有任何問題歡迎反饋，讓我們共同建設好該開源項目。突出代碼貢獻者將會把名字寫入README.md中，歡迎貢獻。

軟件架構(gòu)

使用VUE2.0開發(fā)，開箱即用。所生成的代碼采用Flex布局和流式布局，具備良好的自適應性，特殊需求下也可以支持絕對定位布局、固釘布局。 對于Uniapp移動端開發(fā)者而言，可以直接生成rpx單位的樣式。 對于圖片，建議自建圖床進行維護，如果有圖片素材希望隨著設計稿而維護，可以上網(wǎng)搜索“圖片轉(zhuǎn)BASE64編碼”，把編碼當做圖片地址粘過去也是一樣的（生成的文件會較大）。

安裝教程

1. npm install
2. npm run serve

獨立部署教程

1. npm run build
2. 把dist目錄中的文件拷貝到服務器上，部署目錄為frontendBlocks即可

使用說明

1. 左側(cè)圖層面板可以點擊“添加”按鈕添加子元素
2. 設計時高度和設計時內(nèi)距用來方便觀察父子元素之間的關(guān)系，
3. 左側(cè)面板的“在內(nèi)部插入”功能是來源于public下的tools.json，其中填寫的blocks節(jié)點源于“代碼生成”菜單下的“生成可二次加工的JSON串”
4. 中間面板可以調(diào)整自適應寬度，如果是設計手機端，建議使用375px
5. 右側(cè)面板當點選某個塊時可以調(diào)整其屬性，高級面板里可以設置元素類型的表達，支持表達成input
6. 文件可以新建、保存、讀取，可以跨頁簽復制粘貼（復用設計稿的利器）
7. 當前的設計會被自動保存，待下次打開時可繼續(xù)上次的設計稿繼續(xù)設計，非常的人性化
8. 點擊塊上的小加號，可以很方便的追加新的塊