盘点12个前端低代码的框架开源项目以及前端低代码的总结调研,比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等

news2025/2/25 12:08:25

文章目录

  • 1. Appsmith
  • 2. Amis
  • 3. LowCodeEngine
  • 4. form-generator
  • 5. H5-Dooring/pc-Dooring
  • 6. YAO
  • 7. Mometa
  • 8. NocoBase
  • 9. Sparrow
  • 10. vite-vue3-lowcode
  • 11. 华炎魔方
  • 12. Awesome Lowcode
  • 参考文档

低代码是基于可视化和模型驱动理念,结合云原生与多端体验技术,它能够在多数业务场景下实现大幅度的提效降本,为专业开发者提供了一种全新的高生产力开发范式。

下面就来分享12个值得学习和使用的低代码开源项目,更深入地了解什么是低代码。

1. Appsmith

Appsmith 是一款开源低代码框架,主要用于构建管理面板、内部工具和仪表板等,允许拖放 UI 组件来构建页面,通过连接到任何 API、数据库或 GraphQL 源,并使用 JavaScript 语言编写逻辑,可以在短时间内创建内部应用程序。

Appsmith图片外链

Github地址:https://github.com/appsmithorg/appsmith

2. Amis

Amis 是百度开源的一块前端低代码框架,通过 JSON 配置就能生成各种后台页面,极大减少开发成本,甚至可以不需要了解前端。

图片

Github地址:https://github.com/baidu/amis

3. LowCodeEngine

LowCodeEngine 低代码引擎是一款为低代码平台开发者提供的,具备强大扩展能力的低代码研发框架。由阿里巴巴前端委员会、钉钉宜搭联合出品。使用者只需要基于低代码引擎便可以快速定制符合自己业务需求的低代码平台。

图片

Github地址:https://github.com/alibaba/lowcode-engine

4. form-generator

Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。

图片

Github地址:https://github.com/JakHuang/form-generator

5. H5-Dooring/pc-Dooring

H5-Dooring是一款功能强大、专业可靠的H5可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以 React 和 TypeScript 为主,后台采用nodejs开发。除了 H5 版,还提供了 PC 版。

图片

Github(H5)地址:https://github.com/MrXujiang/h5-Dooring

Github(PC)地址:https://github.com/MrXujiang/pc-Dooring

6. YAO

Yao 是一款支持快速创建 Web 服务和管理后台的开源低代码应用引擎。只需使用 JSON 即可创建数据库模型、编写 API 接口、描述管理后台界面的低代码引擎,使用 Yao 构建的应用可运行在云端或物联网设备上。

图片

Github地址:https://github.com/YaoApp/yao

7. Mometa

mometa 不是传统主流的低代码平台,而是面向研发的、代码可视设计编辑平台;它更像是 dreamweaver、gui 可视编辑之于程序员。它的定位更多是基于程序员本地开发的模式,新增了可视化编码的能力。

图片

Github(⭐️ 3.2k):https://github.com/imcuttle/mometa

8. NocoBase

NocoBase 是一个极易扩展的开源无代码开发平台。无需编程,使用 NocoBase 搭建自己的协作平台、管理系统,只需要几分钟时间。如果你有以下需求,NocoBase 就是为你设计的:

  • 开发组织内部管理系统

  • 通过无代码开发,满足大部分业务需求

  • 无代码开发在操作上足够简单,满足非开发人员;在功能上足够灵活,接近原生开发

  • 可以非常方便的进行扩展开发

  • 私有部署,掌控全部代码和数据

在这里插入图片描述

Github地址:https://github.com/nocobase/nocobase

9. Sparrow

sparrow 是一个场景化低代码(LowCode)搭建工作台,它的核心目标仅有一条“提升研发效率”,目前提供基于Vue、Element-UI 组件库中后台项目的实践,实时输出源代码。

图片

Github地址:https://github.com/sparrow-js/sparrow

10. vite-vue3-lowcode

vite-vue3-lowcode 是一个基于 Vite2.x + Vue3.x + TypeScript 的 H5 低代码平台。

图片

Github地址:https://github.com/buqiyuan/vite-vue3-lowcode

11. 华炎魔方

华炎魔方是 Salesforce 低代码平台的开源替代方案,使用可视化工具进行模型设计, 页面设计, 流程设计, 报表设计 , 只需点击鼠标,就能快速创建应用程序,实现敏捷开发的新高度。

图片

Github:https://github.com/steedos/steedos-platform

12. Awesome Lowcode

Awesome Lowcode 是国内低代码平台从业者交流项目,包含了国内外的一些低代码平台。

图片

Github:https://github.com/taowen/awesome-lowcode

参考文档

  1. https://mp.weixin.qq.com/s/2pTDHCQPtnta3I1njPN3iw

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405565.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

sortablejs的使用实践

文章目录说明基本使用1. 素颜版2. 设置可被拖起的项的样式3. 设置被选中的项的样式4. 设置拖拽时跟随的阴影的样式5. 设置正在被拖拽中的样式6. 设置当前列表容器内是否可以进行拖拽排序7. 设置拖拽的手柄8. 多个列表之间的拖拽 [group]示例1 [name]示例2 [put]示例3 [put func…

【前端】图片懒加载的原理和三种实现方式

一. 图片懒加载的目的 大型网站如常用的淘宝,京东等页面,需要展示大量的商品图片信息,如果打开网页时让所有图片一次性加载完成,需要处理很多次网络请求,等待加载时间比较长,用户体验感很差。 有一种常用…

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快。vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起,但之后的 v2 版本便比较独立&#xff0c…

什么是垃圾回收机制(超详细)

垃圾回收机制 1.垃圾回收机制(Garbage Collction)简称GC,是JavaScript中使用的内存管理系统的基本组部分,是为了防止内存泄漏 2.JavaScript是在创建变量(对象、字符串等)时自动进行了分配内存,并…

Web实训项目--网页设计(附源码)

1 实训基本信息 1.1 实训项目名称 网页设计 1.2 实训环境 本次实训的形式以实战讲解为主,以项目为主导。学习如何设计网页中的轮播图和动画效果,并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。 2 实训内容简介 2.1 网页设计 通过…

关于vue中如何清除定时器的方法

一、问题 1、在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继续执行。 2、在这里需要说一下setTimeout的使用场景&am…

路由vue-route的使用

文章目录一、项目初始化二、路由配置规则vue-route标签作用:路由匹配到的组件将渲染到这里router-link标签作用:路由导航(路由跳转的链接)三、声明式导航和编程式导航声明式导航编程式导航四、路由重定向五、嵌套路由特别注意总结…

04-vscode搭建cmake的编译环境

vscodemingw搭建C/C环境系列 01.vscodemingw搭建编译调试环境 02-vscode编译调试单个源文件程序 03-vscode编译调试多个源文件程序 04-vscode搭建cmake的编译环境 文章目录一、简述二、vscode搭建cmake的编译环境(方法1)1.配置cmake构建目录(可忽略)…

Redux——详解

一.初识Redux 相当于vue中的vuex 1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 3.作用: 集中式管理 react 应用中多个组件共享的状态 看看Redux的工作原理图 如果要进行加一操作…

ES6---promise详解及用法

一、什么是Promise Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配(ES8),但是它们是基于promise的),从语法上讲,Promise是一个对象或者说是构造函数,用来封装异步操作并可…

炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

一:源码获取 这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面,这里我将源码资源分享给大家,大家可以直接免费下载使用哦,没有 vip 的小伙伴找我私聊发送"登录注册"即可我给你发文件,此登录注…

四、vue中路由router配置详解

目录 一、vue中的路由作用 二、vue中的路由router 使用步骤 三、路由跳转 1、带参数路由跳转: (1)this.$router.push() : (2)this.$router.replace() : 2、不带参数路由跳转 3、this.…

【手把手教安装】VUE安装教程+VScode配置!!!

含泪整理Vue安装教程 因为换了新电脑很多软件要重装,所以想到可以写一份教程,为我以后换电脑方便重装也为了大家!! 第一次安装Vue踩坑太多,这里整理一份超详细教程(win11也可!!&…

uniapp 控制台警告 DevTools failed to load SourceMap: Could not load content for http://127.0.0.1问题解决

在uniapp中控制台警告,这是用于在开发时定位到报错的源码位置的工具SourceMap出问题了,如果单纯只是想消除这个警告的方法写在下面第一个,真正解决工具问题的方法是第二个(需要下载一个插件),现在放在这边做…

如何修复运行缓慢的 WordPress 网站?

💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 就其 SEO 而言&…

npm、nrm两种方式查看源和切换镜像

一、使用npm查看当前源、切换淘宝镜像、切换官方源 (1)npm查看当前源: npm get registry(2)npm设置淘宝镜像源: npm config set registry http://registry.npm.taobao.org(3)npm设…

2023 前端一场面试及答案整理

金三马上就要开始了,俗话说得好,知己知彼百战百胜,多准备总是没有错的。以面试的形式和大家一起学习、一起回顾我们的职场生涯。今天简单总结一下我个人去面试,包括我在面试别人时的经验。加油加加油!!&…

2022最新Nodejs下载安装配置步骤(保姆级教程)

1. 进入官网选择下载版本 http://nodejs.cn/download/2.安装过程 步骤1:选择next选项 步骤2:勾选接受协议选项,点击 next(下一步)按钮 : 步骤3:其默认安装目录是C:\Program Files\nodejs\,当…

【Python】ttkbootstrap的介绍与使用

一、什么是ttkbootstrap? 官方文档 [较慢]:https://ttkbootstrap.readthedocs.io/en/latest/ ttkbootstrap 是一个基于 tkinter 的界面美化库,使用这个工具可以开发出类似前端 bootstrap 风格的 tkinter 桌面程序 二、安装步骤 安装命令…

Vue项目安装less和less-loader

第一步:查看webpack和webpack-cli是否安装 打开cmd,通过命令查看 webpack -vwebpack-cli -v如果没有安装,要先进行安装 可以通过 npm view webpack version / npm view webpack-cli version 查看当前webpack的最新版本 可以通过 npm vie…