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ì)較大）。

安裝教程

1. npm install
2. npm run serve

獨(dú)立部署教程

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

使用說(shuō)明

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