yumeisoft-FrontendBlocks

可视化前端低代码设计器
授权协议 Apache
开发语言 JavaScript
所属分类 Web应用开发、 网页开发工具
软件类型 开源软件
地区 国产
投 递 者 闻人献
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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. 点击块上的小加号,可以很方便的追加新的块
 相关资料
  • 如题,怎样优化低代码生成的前端项目? 接手了一个低代码生成的前端项目,项目比较臃肿,不知道咋优化。

  • 概述 毫末科技的前端代码自动化的技术栈为: 制作前端组件:imgcook 前端组件文档:storybook 前端组件仓库:bit(bit.dev) 前端组件快速引入项目:xmind2code(毫末自研) + ice 组件编写规范见: 毫末xmind2code封装uniapp组件规范 其他相关技术 开源xLayers  商业Supernova  教程 imgcook 请见官方文档

  • 背景:目前公司想做一个低代码平台,大致功能包含表单设计、流程设计、报表设计、根据拖拽的形式生成PC端、App端、小程序端的页面。基于这个大致的背景需求点。我自己有以下几个问题想了解下: 基于低代码平台根据拖拽生成前端页面,比如生成PC端页面,整体的页面数据结构大致是怎么样的?怎么样根据这样的数据结构渲染成整个对应的页面?; 基于低代码平台根据拖拽的形式怎么能够生成整个APP、H5应用?(公司前端技

  • 从4.0版开始,Visual C++支持一种新型的工具条资源,这使得工具条的创建比以往更加方便灵活了。在MFC中,工具条的功能由类CToolBar实现。工具条资源和工具条类CToolBar是工具条的两个要素。创建工具条的基本步骤是: 1.创建工具条资源。 2.构建一个CToolBar对象。 3.调用CToolBar::Create函数创建工具条窗口。 4.调用CToolBar::LoadToolB

  • 5.1.1 计算可视化 随着计算机硬件和软件技术的发展,计算机图形技术越来越成熟,如今已经在各行各业中得到了广泛应用。有一些应用本身的任务就是绘制图形,例如制作动画片、艺术设计之类; 还有一些应用不以绘图为目的,但会利用图形来辅助完成任务,例如统计应用的目的是计算 各种数值指标,但常用图形来直观地展示统计结果。 可视化(visualization)是指将抽象事物和过程转变成视觉可见的、形象直观的图

  • 本文向大家介绍pytorch 可视化feature map的示例代码,包括了pytorch 可视化feature map的示例代码的使用技巧和注意事项,需要的朋友参考一下 之前做的一些项目中涉及到feature map 可视化的问题,一个层中feature map的数量往往就是当前层out_channels的值,我们可以通过以下代码可视化自己网络中某层的feature map,个人感觉可视化fea