項目背景

前端開發領域中，最為頭疼的就是頁面布局，即便是工作經驗豐富的老前端程序員，在面對一個新的設計稿時仍舊會有很多需要從頭開始敲的布局。那么為什么不讓設計師直接來操刀寫前端呢？
設計師寫前端由于前端布局不太熟練，也不知道后續的點擊區域大小、彈性關系，即使是手敲出來代碼也極有可能無法直接用于前端項目。那么前端程序員想要指導UI設計師來完成前端切圖工作，不得不面對動輒上百行的代碼進行Review，就這樣的工作量導致了前端程序員一眼就能看出切圖問題所在的可能性變得極低，導致UI設計師短時間之內無法成長為全棧UI。
那么有沒有一種工具，能讓設計師可視化的把前端界面做出來，前端程序員掃一眼就能看出切圖的問題，并快速給予指導。剩下的時間專注于前端JS實現呢？
這個時候就能用FrontendBlocks這個項目了，實測一個熟練程序員一天可以最多做200多張頁面！

項目介紹

FrontendBlocks是一款強大的所見即所得前端頁面設計器，基于Apache 2.0協議開源，是低代碼開發領域的基礎設施，生成的代碼不依賴于任何框架，實測可以將前端布局工作的耗時減少80%以上，最關鍵的是，它實現了人人都可以寫前端頁面的夢想。
不用寫一行代碼即可讓設計師、前端開發人員輕松設計出前端代碼的利器，100%還原設計稿不再是夢。對于Uniapp開發非常友好，可以快速生成組件和頁面。
像是普通的HTML、2x的VUE手機端頁面、1x的VUE電腦端界面，它都可以生成。而且最大的好處是開源免費，前端程序員、項目組可以根據自己的需要來修改出符合自己需要的功能。

快速安裝

我們可以到 https://gitcode.net/yumeisoft/frontend-blocks 上看到這個項目，使用如下命令即可開始體驗：

# 克隆倉庫的命令 git clone https://gitcode.net/yumeisoft/frontend-blocks.git # 安裝并運行項目（已在 Npm 8.18.0、Node v16.17.0 下測試通過） npm i npm run serve

如果不想安裝，也可以直接打開 http://39.104.17.92/frontendBlocks 進行體驗

入門使用

用Chrome瀏覽器打開頁面之后，我們可以看到如下界面。

我們先做一個簡單的APP界面，只需要點擊空白區域，然后在左側“在內部插入”按圖上的指示點擊即可

這個時候我們就有了一個APP頁面的骨架了

調整一下自適應，可以看到界面更像是一個手機界面了，這說明咱們的界面是支持自適應的

為了讓界面酷炫一點，我們可以點擊左側圖層里的標題欄部分，給標題欄換個顏色

同理，我們可以設置底部導航欄的背景色，并且可以清除掉徽章上自帶的陰影，選擇顏色的時候點清除按鈕即可。

然后我們添加點內容，可以看到內容區多了一道線，這就是一個新的DIV

然后我們填寫文本內容，設置文字大小、粗體，即可實時看到效果

如法炮制，你也可以在文本內容里填寫花括號括起來的文本，后續生成代碼的時候這里面的內容會原樣展現在上面，你可以利用這一特性來實現變量（需要自行在data或props里聲明）

要注意的是，如果你的瀏覽器沒有經過任何設置，可能無法顯示12號以下的字體，如何設置看這里：

找到Chrome的外觀->自定義字體，然后最小字號拉到最左邊即可

回到FrontendBlocks，我們發現文字之間沒有空隙會很難看，這時我們可以用調整外邊距的方式來布局

題外話，一般在手機端，我們的長寬、內邊距、外邊距都是以4的倍數為準，這樣看起來好看一些，這里我們設置為8。顏色用純黑也不是很好看，那么我們可以在root上設置一個文字顏色，這樣下面的所有未設定文字顏色的元素都會默認按我們填寫的#666666顏色來顯示文字，這樣看就柔和多了。

有時候我們設計的時候div是一條線，不太容易點，這里我們可以把設計時高度拉大點，就容易點了。設計時高度并不會影響最終輸出的效果。

除了默認的上下布局外，我們可以很容易的用點加號的方式來實現左右布局

如果不想受到彈性的擠壓，則可以點選要固定寬高的元素（對于橫向布局來說是寬，對于縱向布局來說是高），選擇“鋼化”，它對應的是flex-shrink:0，然后設置寬度為一個固定值即可。

如果我們想放個圖片，則可以在這里填寫一個圖片的URL地址，同時我們還可以設置圓角、邊框等

但是大家都知道的，圖片URL地址可能會失效，實戰中，我會給團隊搭一個FTP服務，素材都往項目的一個路徑里放，填寫相對路徑即可，打包做成組件時直接拷貝過去即可。如果只是想看看效果，還有一種方式，那就是使用Base64圖片編碼。
我們可以搜索在線圖片轉Base64工具，這里我隨便找了一個網站：

把圖片拽進去，下面就會直接顯示出Base64編碼，我們把代碼復制過來粘貼進去即可看到效果

預覽模式看一下，可以看到圖片已經顯示出來了。

除了外邊距，我們還可以設置內邊距，這樣文字看起來能更好看一些。基本的使用介紹差不多了，剩下的用法就需要充分了解和掌握彈性布局了。我們生成一下代碼試試看：

在代碼預覽界面里，我們可以直接Ctrl+A，Ctrl+C把它復制到你喜愛的IDE里。這對于不愿意生成文件的小伙伴們是非常友好的。

如果我們想生成文件，則可以點擊“保存”按鈕，會自動下載（實際上是在瀏覽器端生成）。

生成的文件我們可以在F12下看到，代碼非常的規整，Style樣式和DOM結構分離。
到這里，可能大家還有一個小問題，我們生成的所有class都是block-開頭的，可不可以自定義？答案一定是可以的。

以這個標題為例，我們只需要點擊它，設置名稱為title并按下回車，那么生成的時候，class名就為title

css樣式也會隨之更名

提升設計效率的技巧

這個開源項目支持快捷鍵，可以Ctrl+C，Ctrl+V，而且多打開幾個頁簽，是可以在各個頁簽之間互相復制粘貼的，這一特性可以極大提升設計效率。

可能你還關心設計稿會不會丟，首先這個項目有自動保存功能，只要你沒清瀏覽器緩存，你的設計稿一直都在localStorage里存著。如果怕某一天清了瀏覽器緩存，你也可以使用文件菜單的保存功能把你的設計稿保存起來。

如果你或你的團隊動手做了一些可復用的設計稿，可以用生成功能生成JSON，把其中想摘錄的元素對象放到public/tools.json里，下回你就可以直接點擊添加了，就像上文所演示的那樣。

總結

目前這個項目已經被很多公司在使用，剛開始使用的時候會有一些生疏（當然對于熟悉Flex布局的前端開發人員來說基本上上手就會用），連續使用1-2天之后效率便會有明顯的提升，特別是可視化復用設計，40秒出一個前端頁面是非常正常的，1個前端程序員可以完全抵得上一個100人左右的前端切圖團隊。有人會問，那騰出來這么多產能，那前端程序員剩下的時間做什么呢？當然是研究更高深的技術了，畢竟切圖是太基礎的工作了，誰也不可能跟切圖耗上整個青春。
當然這篇文章只是入門級別的使用，這個項目里還有很多功能等待著你去嘗試。如果你對這個項目有一些新的想法，也隨時歡迎貢獻你的代碼，讓這個項目更好。

總結

以上是生活随笔為你收集整理的前端核武器：开源FrontendBlocks所见即所得低代码编辑器让所有人都能做前端布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。