每天都會(huì)去 ProductHunt 看看，這是一個(gè)發(fā)掘有意思產(chǎn)品的國(guó)外平臺(tái)。

這個(gè)平臺(tái)現(xiàn)在已經(jīng)成為了用戶發(fā)現(xiàn)新產(chǎn)品、創(chuàng)業(yè)者們獲得靈感、投資人們尋找新機(jī)會(huì)，以及創(chuàng)始人對(duì)自己的產(chǎn)品進(jìn)行推廣的最佳去處。

最近一段時(shí)間，ProductHunt 平臺(tái)誕生了很多受歡迎的新產(chǎn)品，這些新產(chǎn)品大都有一個(gè)標(biāo)簽：low code。

低代碼是通過(guò)可視化方式創(chuàng)建應(yīng)用的一種概念，特點(diǎn)是代碼量比傳統(tǒng)開發(fā)少得多，甚至無(wú)代碼，能顯著提升開發(fā)效率。而如今，低代碼不僅僅局限于軟件應(yīng)用的研發(fā)，只要是通過(guò)可視化的交互來(lái)幫助使用者完成一個(gè)作品都屬于低代碼的范疇。

如果你還不明白低代碼是什么概念，可以看一下本文章提及的開源項(xiàng)目。這篇文章盤點(diǎn)了 10 款 GitHub 和碼云上最受歡迎的低代碼開源項(xiàng)目，記得收藏。

01. 快速搭建 H5 頁(yè)面

魯班 H5 生成器

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

左側(cè)是常用的組件，右側(cè)是組件的屬性調(diào)節(jié)界面，中間區(qū)域就是編輯和預(yù)覽區(qū)域。魯班 H5 包含了豐富的組件可以選擇，其中包括：

• 雷達(dá)圖、折線圖、柱狀圖、餅狀圖、漏斗圖
• 圖片、評(píng)分、表單、文字、地圖、視頻等

圖標(biāo)和地圖組件

折線圖組件

個(gè)人作品低代碼平臺(tái)

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

用戶可以將組件列表的組件拖到畫布，對(duì)畫布上的元素進(jìn)行編輯。這僅僅是一個(gè) Demo，其余更豐富的組件可以二次開發(fā)。

構(gòu)建頁(yè)面可視化編輯器

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

隨心秀 react 版 H5 微場(chǎng)景編輯器

編輯器功能：拖拽、縮放、旋轉(zhuǎn)、動(dòng)畫、撤銷、重做、組合元素

組件：物料、文本、圖片、QQ語(yǔ)言通話、背景、地圖、音效、模板、視頻、藝術(shù)字

H5-factory

H5 專題頁(yè)面可視化編輯工具，拖拽編輯，靈活切換，一鍵生成 HTML 文件。關(guān)于這個(gè)開源項(xiàng)目的系統(tǒng)架構(gòu)設(shè)計(jì)和組件拆分原則可閱讀文章：

https://juejin.cn/post/6844903858401968136

H5 移動(dòng)端低代碼平臺(tái)

vue3.x vite2.x vant element-plus H5 移動(dòng)端低代碼平臺(tái) lowcode 可視化拖拽 可視化編輯器 visual editor 類似易企秀的H5制作、建站工具、可視化搭建工具

02. 一個(gè)海報(bào)生成器

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

快速：三步完成海報(bào)開發(fā)工作：?jiǎn)?dòng)服務(wù) > 編輯海報(bào) > 生成代碼

簡(jiǎn)單：組件豐富、支持拖拽、復(fù)制、所見即所得、下載等功能。

動(dòng)態(tài)：無(wú)需更改代碼，直接在編輯器修改海報(bào)即可獲得最新的海報(bào)。

上傳頭像

進(jìn)行預(yù)覽

獲取代碼：點(diǎn)擊 代碼，可以查看相關(guān)的接?調(diào)?代碼。

03. JEECG BOOT 低代碼開發(fā)平臺(tái)

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

Online表單開發(fā)、Online報(bào)表、報(bào)表配置能力、在線圖表設(shè)計(jì)、大屏設(shè)計(jì)、移動(dòng)配置能力、表單設(shè)計(jì)器、在線設(shè)計(jì)流程、流程自動(dòng)化配置、插件能力（可插拔）等等！

04. amis 低代碼工具

作者認(rèn)為：對(duì)于大部分常用頁(yè)面，應(yīng)該使用最簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)，甚至不需要學(xué)習(xí)前端框架和工具。

amix 就是這么一款低代碼工具。它通過(guò) JSON 配置就能生成各種后臺(tái)頁(yè)面，極大減少開發(fā)成本，甚至可以不需要了解前端。它的獨(dú)特好處是：

• 不需要懂前端也能能做出專業(yè)且復(fù)雜的后臺(tái)界面，這是所有其他前端 UI 庫(kù)都無(wú)法做到的；
• 不受前端技術(shù)更新的影響；
• 可以完全使用可視化頁(yè)面編輯器來(lái)制作頁(yè)面；

05. Seezoon Stack

Seezoon Stack 是一款基于當(dāng)前最前沿的前端和后臺(tái)實(shí)現(xiàn)的低代碼開發(fā)平臺(tái)。前端技術(shù)?；?Vue3 Vite Antdv，后端技術(shù)?；?Spring boot。

它以快速開發(fā)為目的，在開發(fā)速度和代碼結(jié)構(gòu)上做出一定取舍，無(wú)論如何，你將看到非常地道的 Java 常用開發(fā)框架使用。該項(xiàng)目采用主流開發(fā)框架，無(wú)論打包、編譯、部署都按著大公司的標(biāo)準(zhǔn)完成并不斷逐步完善。