大家好，我是Echa.

昨天有一部分老鐵們私信我說(shuō)：自身不懂代碼，更不會(huì)編寫(xiě)，但是又非常想擁有自己項(xiàng)目和h5頁(yè)面，有沒(méi)有這方便開(kāi)源的項(xiàng)目？說(shuō)他特別喜歡易企秀這類(lèi)型的系統(tǒng)，操作簡(jiǎn)單，DIY起來(lái)非常好看，還能配音樂(lè)，馬上又年會(huì)搞促銷(xiāo)活動(dòng)，運(yùn)營(yíng)推廣自身的產(chǎn)品，再也好不過(guò) 。我二話不說(shuō)，解決老鐵們想要的開(kāi)源項(xiàng)目，擼起袖子就是干，今天給老鐵們分享18個(gè)低代碼開(kāi)源項(xiàng)目，個(gè)個(gè)驚艷，總有一款你喜歡的。

創(chuàng)作不易，喜歡的老鐵們加個(gè)關(guān)注，點(diǎn)個(gè)贊，后面會(huì)持續(xù)更新干貨，速速收藏，謝謝！

全文大綱

visual-drag-demo – 一個(gè)開(kāi)源的低代碼平臺(tái)項(xiàng)目，用戶僅僅通過(guò)簡(jiǎn)單的拖拉拽就能生成一個(gè)頁(yè)面。
mometa – mometa 不同于傳統(tǒng)主流的低代碼平臺(tái)，其用戶是面向開(kāi)發(fā)者的代碼可視設(shè)計(jì)編輯平臺(tái)。
blocks – 簡(jiǎn)單的低代碼頁(yè)面構(gòu)建器，無(wú)需編寫(xiě)代碼即可創(chuàng)建漂亮的網(wǎng)站。你只需要在右側(cè)的組件區(qū)域選擇你想要的模塊，拖到左側(cè)的編輯區(qū)域即可。這樣通過(guò)簡(jiǎn)單的交互就能做出一個(gè)簡(jiǎn)潔的網(wǎng)站。
imove – iMove 是一個(gè)邏輯可復(fù)用的，面向函數(shù)的，流程可視化的 JavaScript 工具庫(kù)。這個(gè)開(kāi)源項(xiàng)目面向前端開(kāi)發(fā)者，核心解決的是復(fù)雜邏輯復(fù)用的問(wèn)題。
vuegg – 通過(guò)將組件直接拖放到可視化編輯器，然后通過(guò)簡(jiǎn)單的交互調(diào)整大小，最終通過(guò)拖拉拽的方式構(gòu)建一個(gè) Vue.js 項(xiàng)目。
builde – 通過(guò)在網(wǎng)頁(yè)上進(jìn)行編輯就能快速制作一個(gè)網(wǎng)頁(yè)，想修改文字直接在網(wǎng)頁(yè)上改，添加Banner、圖片列表等等，通過(guò)簡(jiǎn)單的拖拉拽就行了。
rtvue-lowcode – 一款基于 uniapp 框架和 uview 組件庫(kù)的低代碼開(kāi)發(fā)平臺(tái)，項(xiàng)目提供可視化拖拽編輯器，適用于app、小程序等項(xiàng)目開(kāi)發(fā)。
sparrow – 一個(gè)功能強(qiáng)大的場(chǎng)景化低代碼搭建工作臺(tái)，只需要在這個(gè)工作臺(tái)上進(jìn)行組件的拖拉拽，就能實(shí)時(shí)輸出可讀性強(qiáng)、vue element-ui 組件庫(kù)的源代碼。
luban-h5 – 魯班 H5 是基于 Vue2.0 開(kāi)發(fā)的快速生成頁(yè)面的平臺(tái)，通過(guò)簡(jiǎn)單的拖拽交互方式即可迅速的完成一個(gè)頁(yè)面的制作，類(lèi)似易企秀、Maka、百度 H5 等平臺(tái)。
visual-drag-demo – 這個(gè)項(xiàng)目基于 Vue.js 技術(shù)棧，平臺(tái)主頁(yè)面分為四個(gè)部分，分別是工具欄、組件列表、畫(huà)布、屬性區(qū)域。將文字、圖片等組件拖至畫(huà)布區(qū)域。
ramiko – 基于 next.js 構(gòu)建頁(yè)面可視化編輯器。整個(gè)編輯器的研發(fā)邏輯為前端開(kāi)發(fā)組件庫(kù)，編輯器讀取組件完成頁(yè)面搭建，將頁(yè)面數(shù)據(jù)發(fā)送至服務(wù)端保存。訪問(wèn)頁(yè)面，從服務(wù)端拉取頁(yè)面數(shù)據(jù)，前端渲染頁(yè)面即可。
lz-h5-edit – H5場(chǎng)景編輯器，編輯器功能：拖拽、縮放、旋轉(zhuǎn)、動(dòng)畫(huà)、撤銷(xiāo)、重做、組合元素，組件：物料、文本、圖片、QQ語(yǔ)言通話、背景、地圖、音效、模板、視頻、藝術(shù)字。微信
h5-factoryH5 – H5 專(zhuān)題頁(yè)面可視化編輯工具，拖拽編輯，靈活切換，一鍵生成 HTML 文件。
vite-vue3-lowcode – vue3.x vite2.x vant element-plus H5 移動(dòng)端低代碼平臺(tái) lowcode 可視化拖拽可視化編輯器 visual editor 類(lèi)似易企秀的H5制作、建站工具、可視化搭建工具。
fast-poster – 海報(bào)編輯器最左側(cè)是組件列表?？梢栽谧钭髠?cè)選擇組件，比如文本、二維碼、圖片等添加到最中間的畫(huà)布區(qū)域，通過(guò)右側(cè)的屬性調(diào)節(jié)面板調(diào)節(jié)添加組件的樣式。
jeecg-boot – JeecgBoot 是一款基于代碼生成器的低代碼平臺(tái)！前后端分離架構(gòu) SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服務(wù)。強(qiáng)大的代碼生成器讓前后端代碼一鍵生成，實(shí)現(xiàn)低代碼開(kāi)發(fā)。微信
amis – 它通過(guò) JSON 配置就能生成各種后臺(tái)頁(yè)面，極大減少開(kāi)發(fā)成本，甚至可以不需要了解前端。
seezoon-stack – Seezoon Stack 是一款基于當(dāng)前最前沿的前端和后臺(tái)實(shí)現(xiàn)的低代碼開(kāi)發(fā)平臺(tái)。前端技術(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 – 一個(gè)開(kāi)源的低代碼平臺(tái)項(xiàng)目，用戶僅僅通過(guò)簡(jiǎn)單的拖拉拽就能生成一個(gè)頁(yè)面。

功能點(diǎn)

編輯器
自定義組件（文本、圖片、矩形、圓形、直線、星形、三角形、按鈕、表格、組合）
接口請(qǐng)求（通過(guò)接口請(qǐng)求組件數(shù)據(jù)）
組件聯(lián)動(dòng)
拖拽
刪除組件、調(diào)整圖層層級(jí)
放大縮小
撤銷(xiāo)、重做
組件屬性設(shè)置
吸附
預(yù)覽、保存代碼
綁定事件
綁定動(dòng)畫(huà)
拖拽旋轉(zhuǎn)
復(fù)制粘貼剪切
多個(gè)組件的組合和拆分
鎖定組件
網(wǎng)格線

這個(gè)項(xiàng)目基于 Vue.js 技術(shù)棧，先來(lái)看這個(gè)開(kāi)源項(xiàng)目有什么功能，平臺(tái)主頁(yè)面分為四個(gè)部分，分別是工具欄、組件列表、劃不、屬性區(qū)域：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

mometa

Github（3.4k）：https://github.com/imcuttle/mometa

mometa – mometa 不同于傳統(tǒng)主流的低代碼平臺(tái)，其用戶是面向開(kāi)發(fā)者的代碼可視設(shè)計(jì)編輯平臺(tái)。

它用于解決的問(wèn)題有：

對(duì)低代碼平臺(tái)不形成依賴，二次開(kāi)發(fā)可以無(wú)縫進(jìn)入代碼開(kāi)發(fā)模式
同時(shí)支持所見(jiàn)即所得的可視編輯，用于提效，提升開(kāi)發(fā)體驗(yàn)
提供物料生態(tài)，可自定義物料，提升物料使用體驗(yàn)，提升復(fù)用率

mometa 定位更多是基于程序員本地開(kāi)發(fā)的模式，新增了可視化編碼的能力（修改的也是本地的代碼文件本身）;

它更像是輔助編碼工具，而不是 No-Code (amis/云鳳蝶) 的平臺(tái)方案；

不建議在遠(yuǎn)端服務(wù)起一個(gè)本地開(kāi)發(fā)環(huán)境，所以沒(méi)有做在線部署。

目前的實(shí)現(xiàn)依賴 webpack dev 開(kāi)發(fā)模式，后續(xù)會(huì)考慮兼容 vite。

類(lèi)似于其他的低代碼項(xiàng)目，左側(cè)一般為組件區(qū)域，中間為交互區(qū)域，右側(cè)為屬性調(diào)節(jié)區(qū)域。如下圖所示，支持從視圖定位代碼位置。

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

blocks

官方網(wǎng)址：https://blocks-ui.com/

Github（4.6k）：https://github.com/blocks/blocks

blocks – 簡(jiǎn)單的低代碼頁(yè)面構(gòu)建器，無(wú)需編寫(xiě)代碼即可創(chuàng)建漂亮的網(wǎng)站。你只需要在右側(cè)的組件區(qū)域選擇你想要的模塊，拖到左側(cè)的編輯區(qū)域即可。這樣通過(guò)簡(jiǎn)單的交互就能做出一個(gè)簡(jiǎn)潔的網(wǎng)站。

通過(guò)低代碼開(kāi)發(fā)，不同經(jīng)驗(yàn)水平的開(kāi)發(fā)人員能夠通過(guò)圖形用戶界面，使用拖放式組件和模型驅(qū)動(dòng)邏輯來(lái)創(chuàng)建 Web 和移動(dòng)應(yīng)用。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

iMove

在線文檔：https://www.yuque.com/imove/docs/hvu0md

Github（3.7k）：https://github.com/ykfe/imove

iMove 是一個(gè)邏輯可復(fù)用的，面向函數(shù)的，流程可視化的 JavaScript 工具庫(kù)。這個(gè)開(kāi)源項(xiàng)目面向前端開(kāi)發(fā)者，核心解決的是復(fù)雜邏輯復(fù)用的問(wèn)題。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

vuegg

在線演示：https://vuegg.github.io/

Github（2.3k）：https://github.com/vuegg/vuegg

vuegg – 通過(guò)將組件直接拖放到可視化編輯器，然后通過(guò)簡(jiǎn)單的交互調(diào)整大小，最終通過(guò)拖拉拽的方式構(gòu)建一個(gè) Vue.js 項(xiàng)目。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

builde

Github：https://github.com/BuilderIO/builde

builde – 通過(guò)在網(wǎng)頁(yè)上進(jìn)行編輯就能快速制作一個(gè)網(wǎng)頁(yè)，想修改文字直接在網(wǎng)頁(yè)上改，添加Banner、圖片列表等等，通過(guò)簡(jiǎn)單的拖拉拽就行了

直接看下圖，通過(guò)在網(wǎng)頁(yè)上進(jìn)行編輯就能快速制作一個(gè)網(wǎng)頁(yè)，想修改文字直接在網(wǎng)頁(yè)上改，添加Banner、圖片列表等等，通過(guò)簡(jiǎn)單的拖拉拽就行了。搞前端的同學(xué)可以重點(diǎn)學(xué)習(xí)這個(gè)項(xiàng)目，此類(lèi)技術(shù)將是未來(lái)發(fā)展的重點(diǎn)。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

rtvue-lowcode

Gitee：https://gitee.com/godoforange/rtvue-lowcode

rtvue-lowcode – 一款基于 uniapp 框架和 uview 組件庫(kù)的低代碼開(kāi)發(fā)平臺(tái)，項(xiàng)目提供可視化拖拽編輯器，適用于app、小程序等項(xiàng)目開(kāi)發(fā)。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

sparrow

在線演示：https://sparrow-js.github.io/sparrow-online/

Github：https://github.com/sparrow-js/sparrow

sparrow – 一個(gè)功能強(qiáng)大的場(chǎng)景化低代碼搭建工作臺(tái)，只需要在這個(gè)工作臺(tái)上進(jìn)行組件的拖拉拽，就能實(shí)時(shí)輸出可讀性強(qiáng)、vue element-ui 組件庫(kù)的源代碼。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

luban-h5

在線演示：https://ly525.gitee.io/luban-h5

Github（5.6k）：https://github.com/ly525/luban-h5

luban-h5 – 魯班 H5 是基于 Vue2.0 開(kāi)發(fā)的快速生成頁(yè)面的平臺(tái)，通過(guò)簡(jiǎn)單的拖拽交互方式即可迅速的完成一個(gè)頁(yè)面的制作，類(lèi)似易企秀、Maka、百度 H5 等平臺(tái)。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

visual-drag-demo

在線演示：https://woai3c.github.io/visual-drag-demo

Github（3.6k）：https://github.com/woai3c/visual-drag-demo

visual-drag-demo – 這個(gè)項(xiàng)目基于 Vue.js 技術(shù)棧，平臺(tái)主頁(yè)面分為四個(gè)部分，分別是工具欄、組件列表、畫(huà)布、屬性區(qū)域。將文字、圖片等組件拖至畫(huà)布區(qū)域。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

ramiko

在線演示：http://124.221.147.83:4002/editor

Github（3.6k）：https://github.com/fantasticit/ramiko

ramiko – 基于 next.js 構(gòu)建頁(yè)面可視化編輯器。整個(gè)編輯器的研發(fā)邏輯為前端開(kāi)發(fā)組件庫(kù)，編輯器讀取組件完成頁(yè)面搭建，將頁(yè)面數(shù)據(jù)發(fā)送至服務(wù)端保存。訪問(wèn)頁(yè)面，從服務(wù)端拉取頁(yè)面數(shù)據(jù)，前端渲染頁(yè)面即可。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

lz-h5-edit

在線演示：http://show.lzuntalented.cn/

Github：https://github.com/lzuntalented/lz-h5-edit

lz-h5-edit – H5場(chǎng)景編輯器，編輯器功能：拖拽、縮放、旋轉(zhuǎn)、動(dòng)畫(huà)、撤銷(xiāo)、重做、組合元素，組件：物料、文本、圖片、QQ語(yǔ)言通話、背景、地圖、音效、模板、視頻、藝術(shù)字。微信

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

h5-factory

在線網(wǎng)址：https://yangyuji.github.io/h5-factory/

Github：https://github.com/yangyuji/h5-factory

h5-factory – H5 專(zhuān)題頁(yè)面可視化編輯工具，拖拽編輯，靈活切換，一鍵生成 HTML 文件。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

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 移動(dòng)端低代碼平臺(tái) lowcode 可視化拖拽可視化編輯器 visual editor 類(lèi)似易企秀的H5制作、建站工具、可視化搭建工具。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

fast-poster

在線網(wǎng)址：https://poster.prodapi.cn/#/

Gitee：https://gitee.com/vitojc/fast-poster

fast-poster – 海報(bào)編輯器最左側(cè)是組件列表?？梢栽谧钭髠?cè)選擇組件，比如文本、二維碼、圖片等添加到最中間的畫(huà)布區(qū)域，通過(guò)右側(cè)的屬性調(diào)節(jié)面板調(diào)節(jié)添加組件的樣式。

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）

JeecgBoot

在線網(wǎng)址：http://boot3.jeecg.com/login?redirect=/dashboard/analysis

Gitee：https://gitee.com/jeecg/jeecg-boot

JeecgBoot 是一款基于代碼生成器的低代碼平臺(tái)！前后端分離架構(gòu) SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服務(wù)。強(qiáng)大的代碼生成器讓前后端代碼一鍵生成，實(shí)現(xiàn)低代碼開(kāi)發(fā)。微信

如下圖：

盤(pán)點(diǎn)18個(gè)yyds低代碼開(kāi)源項(xiàng)目（低代碼開(kāi)源平臺(tái)）