yumeisoft-FrontendBlocks可視化前端低代碼設(shè)計(jì)器
FrontendBlocks 是一款強(qiáng)大的所見(jiàn)即所得前端頁(yè)面設(shè)計(jì)器,是低代碼開(kāi)發(fā)領(lǐng)域的基礎(chǔ)建設(shè),生成的代碼不依賴于任何框架,實(shí)測(cè)可以將前端布局工作的耗時(shí)減少80%以上,最關(guān)鍵的是,它實(shí)現(xiàn)了人人都可以寫(xiě)前端頁(yè)面的夢(mèng)想。 不用寫(xiě)一行代碼即可讓設(shè)計(jì)師、前端開(kāi)發(fā)人員輕松設(shè)計(jì)出前端代碼的利器,100%還原設(shè)計(jì)稿不再是夢(mèng)。對(duì)于Uniapp開(kāi)發(fā)非常友好,可以快速生成組件和頁(yè)面。 本軟件可以生成HTML5代碼、按2x生成手機(jī)端VUE代碼、按1x生成電腦端VUE代碼,也可以直接生成JSON串,供其他開(kāi)發(fā)工具(包括自主研發(fā)的)進(jìn)行二次加工。 本軟件采用Apache 2.0協(xié)議開(kāi)源,可以免費(fèi)商用。如有任何問(wèn)題歡迎反饋,讓我們共同建設(shè)好該開(kāi)源項(xiàng)目。突出代碼貢獻(xiàn)者將會(huì)把名字寫(xiě)入README.md中,歡迎貢獻(xiàn)。
軟件架構(gòu)
使用VUE2.0開(kāi)發(fā),開(kāi)箱即用。所生成的代碼采用Flex布局和流式布局,具備良好的自適應(yīng)性,特殊需求下也可以支持絕對(duì)定位布局、固釘布局。 對(duì)于Uniapp移動(dòng)端開(kāi)發(fā)者而言,可以直接生成rpx單位的樣式。 對(duì)于圖片,建議自建圖床進(jìn)行維護(hù),如果有圖片素材希望隨著設(shè)計(jì)稿而維護(hù),可以上網(wǎng)搜索“圖片轉(zhuǎn)BASE64編碼”,把編碼當(dāng)做圖片地址粘過(guò)去也是一樣的(生成的文件會(huì)較大)。
安裝教程
- npm install
- npm run serve
獨(dú)立部署教程
- npm run build
- 把dist目錄中的文件拷貝到服務(wù)器上,部署目錄為frontendBlocks即可
使用說(shuō)明
- 左側(cè)圖層面板可以點(diǎn)擊“添加”按鈕添加子元素
- 設(shè)計(jì)時(shí)高度和設(shè)計(jì)時(shí)內(nèi)距用來(lái)方便觀察父子元素之間的關(guān)系,
- 左側(cè)面板的“在內(nèi)部插入”功能是來(lái)源于public下的tools.json,其中填寫(xiě)的blocks節(jié)點(diǎn)源于“代碼生成”菜單下的“生成可二次加工的JSON串”
- 中間面板可以調(diào)整自適應(yīng)寬度,如果是設(shè)計(jì)手機(jī)端,建議使用375px
- 右側(cè)面板當(dāng)點(diǎn)選某個(gè)塊時(shí)可以調(diào)整其屬性,高級(jí)面板里可以設(shè)置元素類型的表達(dá),支持表達(dá)成input
- 文件可以新建、保存、讀取,可以跨頁(yè)簽復(fù)制粘貼(復(fù)用設(shè)計(jì)稿的利器)
- 當(dāng)前的設(shè)計(jì)會(huì)被自動(dòng)保存,待下次打開(kāi)時(shí)可繼續(xù)上次的設(shè)計(jì)稿繼續(xù)設(shè)計(jì),非常的人性化
- 點(diǎn)擊塊上的小加號(hào),可以很方便的追加新的塊
