盤點18個yyds低代碼開源項目（低代碼開源平臺）
大家好，我是Echa.
昨天有一部分老鐵們私信我說：自身不懂代碼，更不會編寫，但是又非常想擁有自己項目和h5頁面，有沒有這方便開源的項目？說他特別喜歡易企秀這類型的系統(tǒng)，操作簡單，DIY起來非常好看，還能配音樂，馬上又年會搞促銷活動，運營推廣自身的產(chǎn)品，再也好不過 。我二話不說，解決老鐵們想要的開源項目，擼起袖子就是干，今天給老鐵們分享18個低代碼開源項目，個個驚艷，總有一款你喜歡的。
創(chuàng)作不易，喜歡的老鐵們加個關(guān)注，點個贊，后面會持續(xù)更新干貨，速速收藏，謝謝！
全文大綱
- visual-drag-demo – 一個開源的低代碼平臺項目，用戶僅僅通過簡單的拖拉拽就能生成一個頁面。
- mometa – mometa 不同于傳統(tǒng)主流的低代碼平臺，其用戶是面向開發(fā)者的代碼可視設(shè)計編輯平臺。
- blocks – 簡單的低代碼頁面構(gòu)建器，無需編寫代碼即可創(chuàng)建漂亮的網(wǎng)站。你只需要在右側(cè)的組件區(qū)域選擇你想要的模塊，拖到左側(cè)的編輯區(qū)域即可。這樣通過簡單的交互就能做出一個簡潔的網(wǎng)站。
- imove – iMove 是一個邏輯可復用的，面向函數(shù)的，流程可視化的 JavaScript 工具庫。這個開源項目面向前端開發(fā)者，核心解決的是復雜邏輯復用的問題。
- vuegg – 通過將組件直接拖放到可視化編輯器，然后通過簡單的交互調(diào)整大小，最終通過拖拉拽的方式構(gòu)建一個 Vue.js 項目。
- builde – 通過在網(wǎng)頁上進行編輯就能快速制作一個網(wǎng)頁，想修改文字直接在網(wǎng)頁上改，添加Banner、圖片列表等等，通過簡單的拖拉拽就行了。
- rtvue-lowcode – 一款基于 uniapp 框架和 uview 組件庫的低代碼開發(fā)平臺，項目提供可視化拖拽編輯器，適用于app、小程序等項目開發(fā)。
- sparrow – 一個功能強大的場景化低代碼搭建工作臺，只需要在這個工作臺上進行組件的拖拉拽，就能實時輸出可讀性強、vue element-ui 組件庫的源代碼。
- luban-h5 – 魯班 H5 是基于 Vue2.0 開發(fā)的快速生成頁面的平臺，通過簡單的拖拽交互方式即可迅速的完成一個頁面的制作，類似 易企秀、Maka、百度 H5 等平臺。
- visual-drag-demo – 這個項目基于 Vue.js 技術(shù)棧，平臺主頁面分為四個部分，分別是工具欄、組件列表、畫布、屬性區(qū)域。將文字、圖片等組件拖至畫布區(qū)域。
- ramiko – 基于 next.js 構(gòu)建頁面可視化編輯器。整個編輯器的研發(fā)邏輯為前端開發(fā)組件庫，編輯器讀取組件完成頁面搭建，將頁面數(shù)據(jù)發(fā)送至服務(wù)端保存。訪問頁面，從服務(wù)端拉取頁面數(shù)據(jù)，前端渲染頁面即可。
- lz-h5-edit – H5場景編輯器，編輯器功能：拖拽、縮放、旋轉(zhuǎn)、動畫、撤銷、重做、組合元素，組件：物料、文本、圖片、QQ語言通話、背景、地圖、音效、模板、視頻、藝術(shù)字。微信
- h5-factoryH5 – H5 專題頁面可視化編輯工具，拖拽編輯，靈活切換，一鍵生成 HTML 文件。
- vite-vue3-lowcode – vue3.x vite2.x vant element-plus H5 移動端低代碼平臺 lowcode 可視化拖拽 可視化編輯器 visual editor 類似易企秀的H5制作、建站工具、可視化搭建工具。
- fast-poster – 海報編輯器最左側(cè)是組件列表?？梢栽谧钭髠?cè)選擇組件，比如文本、二維碼、圖片等添加到最中間的畫布區(qū)域，通過右側(cè)的屬性調(diào)節(jié)面板調(diào)節(jié)添加組件的樣式。
- jeecg-boot – JeecgBoot 是一款基于代碼生成器的低代碼平臺！前后端分離架構(gòu) SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服務(wù)。強大的代碼生成器讓前后端代碼一鍵生成，實現(xiàn)低代碼開發(fā)。微信
- amis – 它通過 JSON 配置就能生成各種后臺頁面，極大減少開發(fā)成本，甚至可以不需要了解前端。
- seezoon-stack – Seezoon Stack 是一款基于當前最前沿的前端和后臺實現(xiàn)的低代碼開發(fā)平臺。前端技術(shù)?；?Vue3 Vite Antdv，后端技術(shù)棧基于 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 – 一個開源的低代碼平臺項目，用戶僅僅通過簡單的拖拉拽就能生成一個頁面。
功能點
- 編輯器
- 自定義組件（文本、圖片、矩形、圓形、直線、星形、三角形、按鈕、表格、組合）
- 接口請求（通過接口請求組件數(shù)據(jù)）
- 組件聯(lián)動
- 拖拽
- 刪除組件、調(diào)整圖層層級
- 放大縮小
- 撤銷、重做
- 組件屬性設(shè)置
- 吸附
- 預覽、保存代碼
- 綁定事件
- 綁定動畫
- 拖拽旋轉(zhuǎn)
- 復制粘貼剪切
- 多個組件的組合和拆分
- 鎖定組件
- 網(wǎng)格線
這個項目基于 Vue.js 技術(shù)棧，先來看這個開源項目有什么功能，平臺主頁面分為四個部分，分別是工具欄、組件列表、劃不、屬性區(qū)域：
mometa
Github（3.4k）：https://github.com/imcuttle/mometa
mometa – mometa 不同于傳統(tǒng)主流的低代碼平臺，其用戶是面向開發(fā)者的代碼可視設(shè)計編輯平臺。
它用于解決的問題有：
- 對低代碼平臺不形成依賴，二次開發(fā)可以無縫進入代碼開發(fā)模式
- 同時支持所見即所得的可視編輯，用于提效，提升開發(fā)體驗
- 提供物料生態(tài)，可自定義物料，提升物料使用體驗，提升復用率
mometa 定位更多是 基于程序員本地開發(fā)的模式，新增了可視化編碼的能力（修改的也是本地的代碼文件本身）;
它更像是輔助編碼工具，而不是 No-Code (amis/云鳳蝶) 的平臺方案；
不建議在遠端服務(wù)起一個本地開發(fā)環(huán)境，所以沒有做在線部署。
目前的實現(xiàn)依賴 webpack dev 開發(fā)模式，后續(xù)會考慮兼容 vite。
類似于其他的低代碼項目，左側(cè)一般為組件區(qū)域，中間為交互區(qū)域，右側(cè)為屬性調(diào)節(jié)區(qū)域。如下圖所示，支持從視圖定位代碼位置 。
blocks
官方網(wǎng)址：https://blocks-ui.com/
Github（4.6k）：https://github.com/blocks/blocks
blocks – 簡單的低代碼頁面構(gòu)建器，無需編寫代碼即可創(chuàng)建漂亮的網(wǎng)站。你只需要在右側(cè)的組件區(qū)域選擇你想要的模塊，拖到左側(cè)的編輯區(qū)域即可。這樣通過簡單的交互就能做出一個簡潔的網(wǎng)站。
通過低代碼開發(fā)，不同經(jīng)驗水平的開發(fā)人員能夠通過圖形用戶界面，使用拖放式組件和模型驅(qū)動邏輯來創(chuàng)建 Web 和移動應(yīng)用。
如下圖：
iMove
在線文檔：https://www.yuque.com/imove/docs/hvu0md
Github（3.7k）：https://github.com/ykfe/imove
iMove 是一個邏輯可復用的，面向函數(shù)的，流程可視化的 JavaScript 工具庫。這個開源項目面向前端開發(fā)者，核心解決的是復雜邏輯復用的問題。
如下圖：
vuegg
在線演示：https://vuegg.github.io/
Github（2.3k）：https://github.com/vuegg/vuegg
vuegg – 通過將組件直接拖放到可視化編輯器，然后通過簡單的交互調(diào)整大小，最終通過拖拉拽的方式構(gòu)建一個 Vue.js 項目。
如下圖：
builde
Github：https://github.com/BuilderIO/builde
builde – 通過在網(wǎng)頁上進行編輯就能快速制作一個網(wǎng)頁，想修改文字直接在網(wǎng)頁上改，添加Banner、圖片列表等等，通過簡單的拖拉拽就行了
直接看下圖，通過在網(wǎng)頁上進行編輯就能快速制作一個網(wǎng)頁，想修改文字直接在網(wǎng)頁上改，添加Banner、圖片列表等等，通過簡單的拖拉拽就行了。搞前端的同學可以重點學習這個項目，此類技術(shù)將是未來發(fā)展的重點。
如下圖：
rtvue-lowcode
Gitee：https://gitee.com/godoforange/rtvue-lowcode
rtvue-lowcode – 一款基于 uniapp 框架和 uview 組件庫的低代碼開發(fā)平臺，項目提供可視化拖拽編輯器，適用于app、小程序等項目開發(fā)。
如下圖：
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 開發(fā)的快速生成頁面的平臺，通過簡單的拖拽交互方式即可迅速的完成一個頁面的制作，類似 易企秀、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 技術(shù)棧，平臺主頁面分為四個部分，分別是工具欄、組件列表、畫布、屬性區(qū)域。將文字、圖片等組件拖至畫布區(qū)域。
如下圖：
ramiko
在線演示：http://124.221.147.83:4002/editor
Github（3.6k）：https://github.com/fantasticit/ramiko
ramiko – 基于 next.js 構(gòu)建頁面可視化編輯器。整個編輯器的研發(fā)邏輯為前端開發(fā)組件庫，編輯器讀取組件完成頁面搭建，將頁面數(shù)據(jù)發(fā)送至服務(wù)端保存。訪問頁面，從服務(wù)端拉取頁面數(shù)據(jù)，前端渲染頁面即可。
如下圖：
lz-h5-edit
在線演示：http://show.lzuntalented.cn/
Github：https://github.com/lzuntalented/lz-h5-edit
lz-h5-edit – H5場景編輯器，編輯器功能：拖拽、縮放、旋轉(zhuǎn)、動畫、撤銷、重做、組合元素，組件：物料、文本、圖片、QQ語言通話、背景、地圖、音效、模板、視頻、藝術(shù)字。微信
如下圖：
h5-factory
在線網(wǎng)址：https://yangyuji.github.io/h5-factory/
Github：https://github.com/yangyuji/h5-factory
h5-factory – H5 專題頁面可視化編輯工具，拖拽編輯，靈活切換，一鍵生成 HTML 文件。
如下圖：
vite-vue3-lowcode
在線網(wǎng)址：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
在線網(wǎng)址：https://poster.prodapi.cn/#/
Gitee：https://gitee.com/vitojc/fast-poster
fast-poster – 海報編輯器最左側(cè)是組件列表?？梢栽谧钭髠?cè)選擇組件，比如文本、二維碼、圖片等添加到最中間的畫布區(qū)域，通過右側(cè)的屬性調(diào)節(jié)面板調(diào)節(jié)添加組件的樣式。
如下圖：
JeecgBoot
在線網(wǎng)址：http://boot3.jeecg.com/login?redirect=/dashboard/analysis
Gitee：https://gitee.com/jeecg/jeecg-boot
JeecgBoot 是一款基于代碼生成器的低代碼平臺！前后端分離架構(gòu) SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服務(wù)。強大的代碼生成器讓前后端代碼一鍵生成，實現(xiàn)低代碼開發(fā)。微信
如下圖：
amis
在線網(wǎng)址：https://baidu.gitee.io/amis
Gitee：https://gitee.com/baidu/amis
amis – 它通過 JSON 配置就能生成各種后臺頁面，極大減少開發(fā)成本，甚至可以不需要了解前端。
如下圖：
Seezoon Stack
在線網(wǎng)址：https://doc.stack.seezoon.com/
Gitee：https://gitee.com/huangdf/seezoon-stack
Seezoon Stack 是一款基于當前最前沿的前端和后臺實現(xiàn)的低代碼開發(fā)平臺。前端技術(shù)棧基于 Vue3 Vite Antdv，后端技術(shù)?；?Spring boot。
如下圖：
