yumeisoft-FrontendBlocks可视化前端低代码设计器
FrontendBlocks 是一款强大的所见即所得前端页面设计器，是低代码开发领域的基础建设，生成的代码不依赖于任何框架，实测可以将前端布局工作的耗时减少80%以上，最关键的是，它实现了人人都可以写前端页面的梦想。 不用写一行代码即可让设计师、前端开发人员轻松设计出前端代码的利器，100%还原设计稿不再是梦。对于Uniapp开发非常友好，可以快速生成组件和页面。 本软件可以生成HTML5代码、按2x生成手机端VUE代码、按1x生成电脑端VUE代码，也可以直接生成JSON串，供其他开发工具（包括自主研发的）进行二次加工。 本软件采用Apache 2.0协议开源，可以免费商用。如有任何问题欢迎反馈，让我们共同建设好该开源项目。突出代码贡献者将会把名字写入README.md中，欢迎贡献。
软件架构
使用VUE2.0开发，开箱即用。所生成的代码采用Flex布局和流式布局，具备良好的自适应性，特殊需求下也可以支持绝对定位布局、固钉布局。 对于Uniapp移动端开发者而言，可以直接生成rpx单位的样式。 对于图片，建议自建图床进行维护，如果有图片素材希望随着设计稿而维护，可以上网搜索“图片转BASE64编码”，把编码当做图片地址粘过去也是一样的（生成的文件会较大）。
安装教程
- npm install
- npm run serve
独立部署教程
- npm run build
- 把dist目录中的文件拷贝到服务器上，部署目录为frontendBlocks即可
使用说明
- 左侧图层面板可以点击“添加”按钮添加子元素
- 设计时高度和设计时内距用来方便观察父子元素之间的关系，
- 左侧面板的“在内部插入”功能是来源于public下的tools.json，其中填写的blocks节点源于“代码生成”菜单下的“生成可二次加工的JSON串”
- 中间面板可以调整自适应宽度，如果是设计手机端，建议使用375px
- 右侧面板当点选某个块时可以调整其属性，高级面板里可以设置元素类型的表达，支持表达成input
- 文件可以新建、保存、读取，可以跨页签复制粘贴（复用设计稿的利器）
- 当前的设计会被自动保存，待下次打开时可继续上次的设计稿继续设计，非常的人性化
- 点击块上的小加号，可以很方便的追加新的块
评论