yumeisoft-FrontendBlocks 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
yumeisoft-FrontendBlocks 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
yumeisoft-FrontendBlocks 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 Apache
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 杨若瑜
适用人群 未知
收录时间 2022-09-05

软件简介

FrontendBlocks 是一款强大的所见即所得前端页面设计器,是低代码开发领域的基础建设,生成的代码不依赖于任何框架,实测可以将前端布局工作的耗时减少80%以上,最关键的是,它实现了人人都可以写前端页面的梦想。 不用写一行代码即可让设计师、前端开发人员轻松设计出前端代码的利器,100%还原设计稿不再是梦。对于Uniapp开发非常友好,可以快速生成组件和页面。 本软件可以生成HTML5代码、按2x生成手机端VUE代码、按1x生成电脑端VUE代码,也可以直接生成JSON串,供其他开发工具(包括自主研发的)进行二次加工。 本软件采用Apache 2.0协议开源,可以免费商用。如有任何问题欢迎反馈,让我们共同建设好该开源项目。突出代码贡献者将会把名字写入README.md中,欢迎贡献。

alt

alt

alt

alt

 

软件架构

使用VUE2.0开发,开箱即用。所生成的代码采用Flex布局和流式布局,具备良好的自适应性,特殊需求下也可以支持绝对定位布局、固钉布局。 对于Uniapp移动端开发者而言,可以直接生成rpx单位的样式。 对于图片,建议自建图床进行维护,如果有图片素材希望随着设计稿而维护,可以上网搜索“图片转BASE64编码”,把编码当做图片地址粘过去也是一样的(生成的文件会较大)。

安装教程

  1. npm install
  2. npm run serve

独立部署教程

  1. npm run build
  2. 把dist目录中的文件拷贝到服务器上,部署目录为frontendBlocks即可

使用说明

  1. 左侧图层面板可以点击“添加”按钮添加子元素
  2. 设计时高度和设计时内距用来方便观察父子元素之间的关系,
  3. 左侧面板的“在内部插入”功能是来源于public下的tools.json,其中填写的blocks节点源于“代码生成”菜单下的“生成可二次加工的JSON串”
  4. 中间面板可以调整自适应宽度,如果是设计手机端,建议使用375px
  5. 右侧面板当点选某个块时可以调整其属性,高级面板里可以设置元素类型的表达,支持表达成input
  6. 文件可以新建、保存、读取,可以跨页签复制粘贴(复用设计稿的利器)
  7. 当前的设计会被自动保存,待下次打开时可继续上次的设计稿继续设计,非常的人性化
  8. 点击块上的小加号,可以很方便的追加新的块
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
10 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部