FrontendBlocks 可视化前端低代码设计器 3.7版本发布

拼搏现实的明天。 2024-03-26 11:08 10阅读 0赞

## 介绍 ##

项目地址：[https://gitcode.net/yumeisoft/frontend-blocks][https_gitcode.net_yumeisoft_frontend-blocks]  
**FrontendBlocks专注于页面实时的效果呈现、静态布局设计以及不断逼近产品级的前端代码生成**

FrontendBlocks 是一款强大的所见即所得前端页面设计器，是低代码开发领域的基础设施，生成的代码不依赖于任何框架，实测可以将前端布局工作的耗时减少80%以上，最关键的是，它实现了人人都可以写前端页面的梦想。  
不用写一行代码即可让设计师、前端开发人员轻松设计出前端代码的利器，100%还原设计稿不再是梦，你看到的就是浏览器最后呈现的。对于Uniapp开发非常友好，可以快速生成组件和页面。  
本软件可以生成HTML5代码、按2x生成手机端VUE代码、按1x生成电脑端VUE代码，也可以直接生成JSON串，供其他开发工具（包括自主研发的）进行二次加工。  
本软件采用Apache 2.0协议开源，可以免费商用。

## 本次升级内容 ##

版本：3.7（2023年02月19日）

1、提供了Ctrl+Z撤销功能，再也不用担心删掉某个Block恢复不回来了。  
2、极速设置里添加了尺寸功能，可以快速设置大小。  
3、增加了几个模板（在tools.json文件里）。

后台页面布局模板：  
![后台模板][cf7b7a3c81da43d896e2c70d712c1d0b.png]  
手机端首页模板：  
![手机端模板][c7fbceeb76484fb6a67b0f07b2a333ce.png]  
活动表单模板：  
![表单模板][9d1e83339dd44b8f9715afc3ccb82b53.png]

## 题外话 ##

一个人有些力不从心，大家如果有比较好的.blocks设计稿分享分享，如果有一些新的功能更新上来，也欢迎提交代码。FrontendBlocks永远秉承开源、免费的理念欢迎有识之士一起添砖加瓦，共同打造一个大家用起来都很舒服的前端工具。

现在FrontendBlocks待完成事项如下：

<table> 
 <thead> 
  <tr> 
   <th>TODO List</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>可复用CSS组件及组件库</td> 
  </tr> 
  <tr> 
   <td>可重复区（或列表）、数据绑定和预览</td> 
  </tr> 
  <tr> 
   <td>静态资源管理及引用（需要Java后台）</td> 
  </tr> 
  <tr> 
   <td>静态资源拖拽上传（需要Java后台）</td> 
  </tr> 
  <tr> 
   <td>CSS自动优化</td> 
  </tr> 
  <tr> 
   <td>元数据设计及绑定</td> 
  </tr> 
  <tr> 
   <td>React Web代码生成</td> 
  </tr> 
  <tr> 
   <td>React Native代码生成</td> 
  </tr> 
  <tr> 
   <td>Angular代码生成</td> 
  </tr> 
  <tr> 
   <td>NVUE代码生成</td> 
  </tr> 
  <tr> 
   <td>Flutter代码生成</td> 
  </tr> 
  <tr> 
   <td>iOS原生代码生成</td> 
  </tr> 
  <tr> 
   <td>Android原生代码生成</td> 
  </tr> 
  <tr> 
   <td>……</td> 
  </tr> 
 </tbody> 
</table>

[https_gitcode.net_yumeisoft_frontend-blocks]: https://gitcode.net/yumeisoft/frontend-blocks
[cf7b7a3c81da43d896e2c70d712c1d0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/389ac34a99f44532a8d40144496567fb.png
[c7fbceeb76484fb6a67b0f07b2a333ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1e01f1c02b444ff19a1ef34a310f8a50.png
[9d1e83339dd44b8f9715afc3ccb82b53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/310b088b27624fea88044f0763870347.png