本文約2500字，建議閱讀9分鐘

本文分享幾個(gè)值得學(xué)習(xí)和使用的前端低代碼開(kāi)源項(xiàng)目，更深入地了解什么是低代碼。

近幾年，在技術(shù)領(lǐng)域低代碼是比較熱門(mén)的話(huà)題，比如阿里云推出了釘釘低代碼，通過(guò)簡(jiǎn)單的拖拽、配置，即可完成業(yè)務(wù)應(yīng)用的搭建，騰訊云則是推出了微搭，通過(guò)行業(yè)化模板、拖放式組件和可視化配置快速構(gòu)建多端應(yīng)用。

低代碼是基于可視化和模型驅(qū)動(dòng)理念，結(jié)合云原生與多端體驗(yàn)技術(shù)，它能夠在多數(shù)業(yè)務(wù)場(chǎng)景下實(shí)現(xiàn)大幅度的提效降本，為專(zhuān)業(yè)開(kāi)發(fā)者提供了一種全新的高生產(chǎn)力開(kāi)發(fā)范式。下面就來(lái)分享幾個(gè)值得學(xué)習(xí)和使用的前端低代碼開(kāi)源項(xiàng)目，更深入地了解什么是低代碼。

1 Appsmith

Appsmith 是一款開(kāi)源低代碼框架，主要用于構(gòu)建管理面板、內(nèi)部工具和儀表板等，允許拖放 UI 組件來(lái)構(gòu)建頁(yè)面，通過(guò)連接到任何 API、數(shù)據(jù)庫(kù)或 GraphQL 源，并使用 JavaScript 語(yǔ)言編寫(xiě)邏輯，可以在短時(shí)間內(nèi)創(chuàng)建內(nèi)部應(yīng)用程序。

項(xiàng)目鏈接：https://github.com/appsmithorg/appsmith

最新star：24288

2 LowCodeEngine

LowCodeEngine 由阿里巴巴釘釘宜搭團(tuán)隊(duì)開(kāi)發(fā)的低代碼框架，基于阿里云的云基礎(chǔ)設(shè)施和釘釘?shù)钠髽I(yè)數(shù)字化操作系統(tǒng)。使用者只需要基于低代碼引擎便可以快速定制符合自己業(yè)務(wù)需求的低代碼平臺(tái)。同時(shí)LowCodeEngine還提供了很多的基礎(chǔ)組件，可以幫助開(kāi)發(fā)者快速地構(gòu)建業(yè)務(wù)頁(yè)面。

項(xiàng)目鏈接：https://github.com/alibaba/lowcode-demo

最新star：887

3 Amis

Amis 是百度開(kāi)源的一款前端低代碼框架，通過(guò) JSON 配置就能生成各種后臺(tái)頁(yè)面，包括數(shù)據(jù)獲取、表單提交及驗(yàn)證等功能，同時(shí)，Amis內(nèi)置 100 種 UI 組件，能夠滿(mǎn)足各種頁(yè)面組件展現(xiàn)的需求，極大減少開(kāi)發(fā)成本，甚至可以不需要了解前端。amis 在百度內(nèi)部得到了廣泛使用，在 4 年多的時(shí)間里創(chuàng)建了 3w 多頁(yè)面，從內(nèi)容審核到機(jī)器管理，從數(shù)據(jù)分析到模型訓(xùn)練，amis 滿(mǎn)足了各種各樣的頁(yè)面需求。我們可以下載源碼，然后使用如下的命令來(lái)體驗(yàn)。

項(xiàng)目鏈接：https://github.com/baidu/amis

最新star：12860

4 tmagic-editor

tmagic-editor是一款由騰訊技術(shù)中心出品的一款開(kāi)源低代碼框架，能夠?qū)崿F(xiàn)零代碼/低代碼生成頁(yè)面 ， 可以快速搭建可視化頁(yè)面生產(chǎn)平臺(tái)，讓非技術(shù)人員可以通過(guò)拖拽和配置，自助生成H5頁(yè)面、PC頁(yè)面、TV頁(yè)面，大大降低頁(yè)面生產(chǎn)成本 。

項(xiàng)目鏈接：https://github.com/Tencent/tmagic-editor

最新star：3112

5 dooring-electron-lowcode

dooring-electron-lowcode是一款功能強(qiáng)大，專(zhuān)業(yè)可靠的可視化頁(yè)面配置解決方案，致力于提供一套簡(jiǎn)單方便、專(zhuān)業(yè)可靠、無(wú)限可能的H5落地頁(yè)最佳實(shí)踐。技術(shù)棧以react和typescript為主， 后臺(tái)采用nodejs開(kāi)發(fā), electron作為桌面端基礎(chǔ)方案。

項(xiàng)目鏈接：https://github.com/H5-Dooring/dooring-electron-lowcode

最新star：150

6 vite-vue3-lowcode

vite-vue3-lowcode 是一款基于Vite2.x Vue3.x TypeScript技術(shù)框架的的H5 低代碼平臺(tái)。目前只是一個(gè)簡(jiǎn)單的模板，支持?jǐn)?shù)據(jù)配置的導(dǎo)入和導(dǎo)出，配置的修改和刪除操作，用到的技術(shù)有sandbox 中執(zhí)行自定義邏輯、monaco-editor 自定義代碼補(bǔ)全、vue3 createRenderer 自定義渲染器等。

項(xiàng)目鏈接：https://github.com/buqiyuan/vite-vue3-lowcode

最新star：2158

7 shida

shida是一個(gè)視頻可視化搭建項(xiàng)目，開(kāi)發(fā)者可以通過(guò)拖拽就可以快速地生產(chǎn)一個(gè)短視頻，使用方式就像易企秀或百度 H5 等 h5 低代碼平臺(tái)一樣。shida的后端視頻合成部分是基于FFCreator進(jìn)行開(kāi)發(fā)的，F(xiàn)FCreator 是一個(gè)基于 node.js 的輕量、靈活的短視頻加工庫(kù)，只需要添加幾張圖片或視頻片段再加一段背景音樂(lè)，就可以快速生成一個(gè)很酷的視頻短片。

項(xiàng)目鏈接：https://github.com/tnfe/shida

最新star：363

8 quark-h5

quark-h5是一個(gè)使用Vue Koa的前端低代碼框架，和大多數(shù)的前端低代碼框架一樣，采用的是編輯器生成頁(yè)面JSON數(shù)據(jù)，服務(wù)端負(fù)責(zé)存取JSON數(shù)據(jù)，渲染時(shí)從服務(wù)端取數(shù)據(jù)JSON交給前端模板處理。

項(xiàng)目鏈接：https://github.com/huangwei9527/quark-h5

最新star：3064

9 gods-pen

碼良是一個(gè)在線(xiàn)生成 H5 頁(yè)面并提供頁(yè)面管理和頁(yè)面編輯的平臺(tái)，用于快速制作 H5 頁(yè)面。用戶(hù)無(wú)需掌握復(fù)雜的編程技術(shù)，通過(guò)簡(jiǎn)單拖拽、少量配置即可制作精美的頁(yè)面，可用于營(yíng)銷(xiāo)場(chǎng)景下的頁(yè)面制作。同時(shí)，也為開(kāi)發(fā)者提供了完備的編程接入能力，通過(guò)腳本和組件的形式獲得強(qiáng)大的組件行為和交互控制能力。

項(xiàng)目鏈接：https://github.com/ymm-tech/gods-pen

最新star：4247

10 luban-h5

魯班H5是基于Vue2.0開(kāi)發(fā)的支持拖拽方式來(lái)快速生成頁(yè)面的低代碼平臺(tái)，功能基本類(lèi)似于易企秀、Maka、百度等H5平臺(tái)。

項(xiàng)目鏈接：https://github.com/ly525/luban-h5

最新star：5654

11 mometa

mometa 并不是傳統(tǒng)主流的低代碼平臺(tái)（如 amis），mometa 是面向研發(fā)、代碼可視設(shè)計(jì)編輯平臺(tái)，更像是 dreamweaver、gui的可視編輯 工具。借助它，我們可以獲得所見(jiàn)即所得的可視編輯開(kāi)發(fā)體驗(yàn)。

項(xiàng)目鏈接：https://github.com/imcuttle/mometa

最新star：3469

12 h5-factory

h5-factory是專(zhuān)題頁(yè)面可視化編輯工具，可以通過(guò)拖拽來(lái)設(shè)計(jì)頁(yè)面，并且支持一鍵生成html文件。

項(xiàng)目鏈接：https://github.com/xuhaiqing/h5-factory

最新star：6

13 steedos-platform

steedos-platform是 Salesforce 低代碼平臺(tái)的開(kāi)源替代方案，使用可視化工具進(jìn)行模型設(shè)計(jì), 頁(yè)面設(shè)計(jì), 流程設(shè)計(jì), 報(bào)表設(shè)計(jì)，只需點(diǎn)擊鼠標(biāo)，就能快速創(chuàng)建應(yīng)用程序，實(shí)現(xiàn)敏捷開(kāi)發(fā)的新高度。在技術(shù)實(shí)現(xiàn)細(xì)節(jié)上，steedos-platform使用元數(shù)據(jù)定義對(duì)象，字段，配置，代碼，邏輯和頁(yè)面布局，并基于這些元數(shù)據(jù)自動(dòng)生成系統(tǒng)的數(shù)據(jù)結(jié)構(gòu)以及Steedos應(yīng)用程序的用戶(hù)界面和自動(dòng)化邏輯。

項(xiàng)目鏈接：https://github.com/steedos/steedos-platform/

最新star：951

14 lz-h5-edit

lz-h5-edit是一個(gè)H5低代碼編輯平臺(tái)，支持拖拽、縮放、旋轉(zhuǎn)、動(dòng)畫(huà)、撤銷(xiāo)、重做、組合元素等方式來(lái)創(chuàng)建H5頁(yè)面。

項(xiàng)目鏈接：https://github.com/lzuntalented/lz-h5-edit

最新star：462

15 tefact

星搭開(kāi)源無(wú)代碼編輯器，使用圖形化界面生成 網(wǎng)站、H5和表單，無(wú)需任何代碼即可生成應(yīng)用程序。

項(xiàng)目鏈接：https://github.com/staringos/tefact/

最新star：244

16 fast-poster

fast-poster是一款使用Python Vue開(kāi)發(fā)的通用海報(bào)生成器，可以用來(lái)快速地生成海報(bào)。使用時(shí)只需要經(jīng)過(guò)三步即可生成所需要的海報(bào)：?jiǎn)?dòng)服務(wù) > 編輯海報(bào) > 生成代碼。

項(xiàng)目鏈接：https://github.com/psoho/fast-poster

最新star：408

17 openDataV

OpenDataV 是一款基于Vue3 vite TypeScript開(kāi)發(fā)前端可視化低代碼平臺(tái)。支持拖拽式、可視化、低代碼數(shù)據(jù)可視化開(kāi)發(fā)，你可以用它自由的拼接成各種炫酷的大屏，同時(shí)支持接入開(kāi)發(fā)者自己開(kāi)發(fā)的組件接入平臺(tái)。

項(xiàng)目鏈接：https://github.com/AnsGoo/openDataV

最新star：196

18 mall-cook

Mall-Cook 是一個(gè)基于 vue 開(kāi)發(fā)的可視化商城搭建平臺(tái)，包括多頁(yè)面可視化構(gòu)建、Json Schema 生成器（可視化搭建物料控制面板），實(shí)現(xiàn)組件流水線(xiàn)式標(biāo)準(zhǔn)接入平臺(tái)。最新版本使用 uni-app 重構(gòu)物料、模板項(xiàng)目，支持生成 H5、小程序多端商城。

項(xiàng)目鏈接：https://github.com/wangyuan389/mall-cook

最新star：3632

19 form-generator

form-generator是一個(gè)基于Element UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于Element的vue項(xiàng)目中，也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。

項(xiàng)目鏈接：https://github.com/JakHuang/form-generator

最新star：7482

20 vjdesign

vjdesign是一款支持任何 vue 項(xiàng)目中的組件，不需要二次開(kāi)發(fā)就可以定義支持的組件以及組件的屬性，并且對(duì)組件的屬性和數(shù)據(jù)的關(guān)系以及表單的交互行為也可以通過(guò)設(shè)計(jì)器配置實(shí)現(xiàn)。

項(xiàng)目鏈接：https://github.com/fyl080801/vjdesign

最新star：384