盘点18个yyds低代码开源项目(开源的低代码开发平台)
大家好,我是Echa.
昨天有一部分老铁们私信我说:自身不懂代码,更不会编写,但是又非常想拥有自己项目和h5页面,有没有这方便开源的项目?说他特别喜欢易企秀这类型的系统,操作简单,DIY起来非常好看,还能配音乐,马上又年会搞促销活动,运营推广自身的产品,再也好不过 。我二话不说,解决老铁们想要的开源项目,撸起袖子就是干,今天给老铁们分享18个低代码开源项目,个个惊艳,总有一款你喜欢的。
创作不易,喜欢的老铁们加个关注,点个赞,后面会持续更新干货,速速收藏,谢谢!
全文大纲
- visual-drag-demo – 一个开源的低代码平台项目,用户仅仅通过简单的拖拉拽就能生成一个页面。
- mometa – mometa 不同于传统主流的低代码平台,其用户是面向开发者的代码可视设计编辑平台。
- blocks – 简单的低代码页面构建器,无需编写代码即可创建漂亮的网站。你只需要在右侧的组件区域选择你想要的模块,拖到左侧的编辑区域即可。这样通过简单的交互就能做出一个简洁的网站。
- imove – iMove 是一个逻辑可复用的,面向函数的,流程可视化的 JavaScript 工具库。这个开源项目面向前端开发者,核心解决的是复杂逻辑复用的问题。
- vuegg – 通过将组件直接拖放到可视化编辑器,然后通过简单的交互调整大小,最终通过拖拉拽的方式构建一个 Vue.js 项目。
- builde – 通过在网页上进行编辑就能快速制作一个网页,想修改文字直接在网页上改,添加Banner、图片列表等等,通过简单的拖拉拽就行了。
- rtvue-lowcode – 一款基于 uniapp 框架和 uview 组件库的低代码开发平台,项目提供可视化拖拽编辑器,适用于app、小程序等项目开发。
- sparrow – 一个功能强大的场景化低代码搭建工作台,只需要在这个工作台上进行组件的拖拉拽,就能实时输出可读性强、vue element-ui 组件库的源代码。
- luban-h5 – 鲁班 H5 是基于 Vue2.0 开发的快速生成页面的平台,通过简单的拖拽交互方式即可迅速的完成一个页面的制作,类似 易企秀、Maka、百度 H5 等平台。
- visual-drag-demo – 这个项目基于 Vue.js 技术栈,平台主页面分为四个部分,分别是工具栏、组件列表、画布、属性区域。将文字、图片等组件拖至画布区域。
- ramiko – 基于 next.js 构建页面可视化编辑器。整个编辑器的研发逻辑为前端开发组件库,编辑器读取组件完成页面搭建,将页面数据发送至服务端保存。访问页面,从服务端拉取页面数据,前端渲染页面即可。
- lz-h5-edit – H5场景编辑器,编辑器功能:拖拽、缩放、旋转、动画、撤销、重做、组合元素,组件:物料、文本、图片、QQ语言通话、背景、地图、音效、模板、视频、艺术字。微信
- h5-factoryH5 – H5 专题页面可视化编辑工具,拖拽编辑,灵活切换,一键生成 HTML 文件。
- vite-vue3-lowcode – vue3.x vite2.x vant element-plus H5 移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具。
- fast-poster – 海报编辑器最左侧是组件列表。可以在最左侧选择组件,比如文本、二维码、图片等添加到最中间的画布区域,通过右侧的属性调节面板调节添加组件的样式。
- jeecg-boot – JeecgBoot 是一款基于代码生成器的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT,支持微服务。强大的代码生成器让前后端代码一键生成,实现低代码开发。微信
- amis – 它通过 JSON 配置就能生成各种后台页面,极大减少开发成本,甚至可以不需要了解前端。
- seezoon-stack – Seezoon Stack 是一款基于当前最前沿的前端和后台实现的低代码开发平台。前端技术栈基于 Vue3 Vite Antdv,后端技术栈基于 Spring boot。
visual-drag-demo
在线演示:https://woai3c.Github.io/visual-drag-demo/
Github(3.6k):https://github.com/woai3c/visual-drag-demo
visual-drag-demo – 一个开源的低代码平台项目,用户仅仅通过简单的拖拉拽就能生成一个页面。
功能点
- 编辑器
- 自定义组件(文本、图片、矩形、圆形、直线、星形、三角形、按钮、表格、组合)
- 接口请求(通过接口请求组件数据)
- 组件联动
- 拖拽
- 删除组件、调整图层层级
- 放大缩小
- 撤销、重做
- 组件属性设置
- 吸附
- 预览、保存代码
- 绑定事件
- 绑定动画
- 拖拽旋转
- 复制粘贴剪切
- 多个组件的组合和拆分
- 锁定组件
- 网格线
这个项目基于 Vue.js 技术栈,先来看这个开源项目有什么功能,平台主页面分为四个部分,分别是工具栏、组件列表、划不、属性区域:
mometa
Github(3.4k):https://github.com/imcuttle/mometa
mometa – mometa 不同于传统主流的低代码平台,其用户是面向开发者的代码可视设计编辑平台。
它用于解决的问题有:
- 对低代码平台不形成依赖,二次开发可以无缝进入代码开发模式
- 同时支持所见即所得的可视编辑,用于提效,提升开发体验
- 提供物料生态,可自定义物料,提升物料使用体验,提升复用率
mometa 定位更多是 基于程序员本地开发的模式,新增了可视化编码的能力(修改的也是本地的代码文件本身);
它更像是辅助编码工具,而不是 No-Code (amis/云凤蝶) 的平台方案;
不建议在远端服务起一个本地开发环境,所以没有做在线部署。
目前的实现依赖 webpack dev 开发模式,后续会考虑兼容 vite。
类似于其他的低代码项目,左侧一般为组件区域,中间为交互区域,右侧为属性调节区域。如下图所示,支持从视图定位代码位置 。
blocks
官方网址:https://blocks-ui.com/
Github(4.6k):https://github.com/blocks/blocks
blocks – 简单的低代码页面构建器,无需编写代码即可创建漂亮的网站。你只需要在右侧的组件区域选择你想要的模块,拖到左侧的编辑区域即可。这样通过简单的交互就能做出一个简洁的网站。
通过低代码开发,不同经验水平的开发人员能够通过图形用户界面,使用拖放式组件和模型驱动逻辑来创建 Web 和移动应用。
如下图:
iMove
在线文档:https://www.yuque.com/imove/docs/hvu0md
Github(3.7k):https://github.com/ykfe/imove
iMove 是一个逻辑可复用的,面向函数的,流程可视化的 JavaScript 工具库。这个开源项目面向前端开发者,核心解决的是复杂逻辑复用的问题。
如下图:
vuegg
在线演示:https://vuegg.github.io/
Github(2.3k):https://github.com/vuegg/vuegg
vuegg – 通过将组件直接拖放到可视化编辑器,然后通过简单的交互调整大小,最终通过拖拉拽的方式构建一个 Vue.js 项目。
如下图:
builde
Github:https://github.com/BuilderIO/builde
builde – 通过在网页上进行编辑就能快速制作一个网页,想修改文字直接在网页上改,添加Banner、图片列表等等,通过简单的拖拉拽就行了
直接看下图,通过在网页上进行编辑就能快速制作一个网页,想修改文字直接在网页上改,添加Banner、图片列表等等,通过简单的拖拉拽就行了。搞前端的同学可以重点学习这个项目,此类技术将是未来发展的重点。
如下图:
rtvue-lowcode
Gitee:https://gitee.com/godoforange/rtvue-lowcode
rtvue-lowcode – 一款基于 uniapp 框架和 uview 组件库的低代码开发平台,项目提供可视化拖拽编辑器,适用于app、小程序等项目开发。
如下图:
sparrow
在线演示:https://sparrow-js.github.io/sparrow-online/
Github:https://github.com/sparrow-js/sparrow
sparrow – 一个功能强大的场景化低代码搭建工作台,只需要在这个工作台上进行组件的拖拉拽,就能实时输出可读性强、vue element-ui 组件库的源代码。
如下图:
luban-h5
在线演示:https://ly525.gitee.io/luban-h5
Github(5.6k):https://github.com/ly525/luban-h5
luban-h5 – 鲁班 H5 是基于 Vue2.0 开发的快速生成页面的平台,通过简单的拖拽交互方式即可迅速的完成一个页面的制作,类似 易企秀、Maka、百度 H5 等平台。
如下图:
visual-drag-demo
在线演示:https://woai3c.github.io/visual-drag-demo
Github(3.6k):https://github.com/woai3c/visual-drag-demo
visual-drag-demo – 这个项目基于 Vue.js 技术栈,平台主页面分为四个部分,分别是工具栏、组件列表、画布、属性区域。将文字、图片等组件拖至画布区域。
如下图:
ramiko
在线演示:http://124.221.147.83:4002/editor
Github(3.6k):https://github.com/fantasticit/ramiko
ramiko – 基于 next.js 构建页面可视化编辑器。整个编辑器的研发逻辑为前端开发组件库,编辑器读取组件完成页面搭建,将页面数据发送至服务端保存。访问页面,从服务端拉取页面数据,前端渲染页面即可。
如下图:
lz-h5-edit
在线演示:http://show.lzuntalented.cn/
Github:https://github.com/lzuntalented/lz-h5-edit
lz-h5-edit – H5场景编辑器,编辑器功能:拖拽、缩放、旋转、动画、撤销、重做、组合元素,组件:物料、文本、图片、QQ语言通话、背景、地图、音效、模板、视频、艺术字。微信
如下图:
h5-factory
在线网址:https://yangyuji.github.io/h5-factory/
Github:https://github.com/yangyuji/h5-factory
h5-factory – H5 专题页面可视化编辑工具,拖拽编辑,灵活切换,一键生成 HTML 文件。
如下图:
vite-vue3-lowcode
在线网址:https://vite-vue3-lowcode.vercel.app/
Github:https://github.com/buqiyuan/vite-vue3-lowcode
vite-vue3-lowcode – vue3.x vite2.x vant element-plus H5 移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具。
如下图:
fast-poster
在线网址:https://poster.prodapi.cn/#/
Gitee:https://gitee.com/vitojc/fast-poster
fast-poster – 海报编辑器最左侧是组件列表。可以在最左侧选择组件,比如文本、二维码、图片等添加到最中间的画布区域,通过右侧的属性调节面板调节添加组件的样式。
如下图:
JeecgBoot
在线网址:http://boot3.jeecg.com/login?redirect=/dashboard/analysis
Gitee:https://gitee.com/jeecg/jeecg-boot
JeecgBoot 是一款基于代码生成器的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT,支持微服务。强大的代码生成器让前后端代码一键生成,实现低代码开发。微信
如下图:
amis
在线网址:https://baidu.gitee.io/amis
Gitee:https://gitee.com/baidu/amis
amis – 它通过 JSON 配置就能生成各种后台页面,极大减少开发成本,甚至可以不需要了解前端。
如下图:
Seezoon Stack
在线网址:https://doc.stack.seezoon.com/
Gitee:https://gitee.com/huangdf/seezoon-stack
Seezoon Stack 是一款基于当前最前沿的前端和后台实现的低代码开发平台。前端技术栈基于 Vue3 Vite Antdv,后端技术栈基于 Spring boot。
如下图: