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

本文分享幾個值得學習和使用的前端低代碼開源項目，更深入地了解什么是低代碼。

近幾年，在技術領域低代碼是比較熱門的話題，比如阿里云推出了釘釘低代碼，通過簡單的拖拽、配置，即可完成業(yè)務應用的搭建，騰訊云則是推出了微搭，通過行業(yè)化模板、拖放式組件和可視化配置快速構建多端應用。

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

1 Appsmith

Appsmith 是一款開源低代碼框架，主要用于構建管理面板、內部工具和儀表板等，允許拖放 UI 組件來構建頁面，通過連接到任何 API、數據庫或 GraphQL 源，并使用 JavaScript 語言編寫邏輯，可以在短時間內創(chuàng)建內部應用程序。

項目鏈接：https://github.com/appsmithorg/appsmith

最新star：24288

2 LowCodeEngine

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

項目鏈接：https://github.com/alibaba/lowcode-demo

最新star：887

3 Amis

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

項目鏈接：https://github.com/baidu/amis

最新star：12860

4 tmagic-editor

tmagic-editor是一款由騰訊技術中心出品的一款開源低代碼框架，能夠實現零代碼/低代碼生成頁面 ， 可以快速搭建可視化頁面生產平臺，讓非技術人員可以通過拖拽和配置，自助生成H5頁面、PC頁面、TV頁面，大大降低頁面生產成本 。

項目鏈接：https://github.com/Tencent/tmagic-editor

最新star：3112

5 dooring-electron-lowcode

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

項目鏈接：https://github.com/H5-Dooring/dooring-electron-lowcode

最新star：150

6 vite-vue3-lowcode

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

項目鏈接：https://github.com/buqiyuan/vite-vue3-lowcode

最新star：2158

7 shida

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

項目鏈接：https://github.com/tnfe/shida

最新star：363

8 quark-h5

quark-h5是一個使用Vue Koa的前端低代碼框架，和大多數的前端低代碼框架一樣，采用的是編輯器生成頁面JSON數據，服務端負責存取JSON數據，渲染時從服務端取數據JSON交給前端模板處理。

項目鏈接：https://github.com/huangwei9527/quark-h5

最新star：3064

9 gods-pen

碼良是一個在線生成 H5 頁面并提供頁面管理和頁面編輯的平臺，用于快速制作 H5 頁面。用戶無需掌握復雜的編程技術，通過簡單拖拽、少量配置即可制作精美的頁面，可用于營銷場景下的頁面制作。同時，也為開發(fā)者提供了完備的編程接入能力，通過腳本和組件的形式獲得強大的組件行為和交互控制能力。

項目鏈接：https://github.com/ymm-tech/gods-pen

最新star：4247

10 luban-h5

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

項目鏈接：https://github.com/ly525/luban-h5

最新star：5654

11 mometa

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

項目鏈接：https://github.com/imcuttle/mometa

最新star：3469

12 h5-factory

h5-factory是專題頁面可視化編輯工具，可以通過拖拽來設計頁面，并且支持一鍵生成html文件。

項目鏈接：https://github.com/xuhaiqing/h5-factory

最新star：6

13 steedos-platform

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

項目鏈接：https://github.com/steedos/steedos-platform/

最新star：951

14 lz-h5-edit

lz-h5-edit是一個H5低代碼編輯平臺，支持拖拽、縮放、旋轉、動畫、撤銷、重做、組合元素等方式來創(chuàng)建H5頁面。

項目鏈接：https://github.com/lzuntalented/lz-h5-edit

最新star：462

15 tefact

星搭開源無代碼編輯器，使用圖形化界面生成 網站、H5和表單，無需任何代碼即可生成應用程序。

項目鏈接：https://github.com/staringos/tefact/

最新star：244

16 fast-poster

fast-poster是一款使用Python Vue開發(fā)的通用海報生成器，可以用來快速地生成海報。使用時只需要經過三步即可生成所需要的海報：啟動服務 > 編輯海報 > 生成代碼。

項目鏈接：https://github.com/psoho/fast-poster

最新star：408

17 openDataV

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

項目鏈接：https://github.com/AnsGoo/openDataV

最新star：196

18 mall-cook

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

項目鏈接：https://github.com/wangyuan389/mall-cook

最新star：3632

19 form-generator

form-generator是一個基于Element UI表單設計及代碼生成器，可將生成的代碼直接運行在基于Element的vue項目中，也可導出JSON表單，使用配套的解析器將JSON解析成真實的表單。

項目鏈接：https://github.com/JakHuang/form-generator

最新star：7482

20 vjdesign

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

項目鏈接：https://github.com/fyl080801/vjdesign

最新star：384