本文約2500字，建議閱讀9分鐘
本文分享幾個值得學習和使用的前端低代碼開源項目，更深入地了解什麼是低代碼。
近幾年，在技術領域低代碼是比較熱門的話題，比如阿裡雲推出了釘釘低代碼，通過簡單的拖拽、配置，即可完成業務應用的搭建，騰訊雲則是推出了微搭，通過行業化模闆、拖放式元件和可視化配置快速建構多端應用。
低代碼是基于可視化和模型驅動理念，結合雲原生與多端體驗技術，它能夠在多數業務場景下實作大幅度的提效降本，為專業開發者提供了一種全新的高生産力開發範式。下面就來分享幾個值得學習和使用的前端低代碼開源項目，更深入地了解什麼是低代碼。
1 Appsmith
Appsmith 是一款開源低代碼架構，主要用于建構管理面闆、内部工具和儀表闆等，允許拖放 UI 元件來建構頁面，通過連接配接到任何 API、資料庫或 GraphQL 源，并使用 JavaScript 語言編寫邏輯，可以在短時間内建立内部應用程式。
項目連結：https://github.com/appsmithorg/appsmith
最新star：24288
2 LowCodeEngine
LowCodeEngine 由阿裡巴巴釘釘宜搭團隊開發的低代碼架構，基于阿裡雲的雲基礎設施和釘釘的企業數字化作業系統。使用者隻需要基于低代碼引擎便可以快速定制符合自己業務需求的低代碼平台。同時LowCodeEngine還提供了很多的基礎元件，可以幫助開發者快速地建構業務頁面。
項目連結：https://github.com/alibaba/lowcode-demo
最新star：887
3 Amis
Amis 是百度開源的一款前端低代碼架構，通過 JSON 配置就能生成各種背景頁面，包括資料擷取、表單送出及驗證等功能，同時，Amis内置 100+ 種 UI 元件，能夠滿足各種頁面元件展現的需求，極大減少開發成本，甚至可以不需要了解前端。amis 在百度内部得到了廣泛使用，在 4 年多的時間裡建立了 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是一款功能強大，專業可靠的可視化頁面配置解決方案，緻力于提供一套簡單友善、專業可靠、無限可能的H5落地頁最佳實踐。技術棧以react和typescript為主， 背景采用nodejs開發, 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 中執行自定義邏輯、monaco-editor 自定義代碼補全、vue3 createRenderer 自定義渲染器等。
項目連結：https://github.com/buqiyuan/vite-vue3-lowcode
最新star：2158
7 shida
shida是一個視訊可視化搭建項目，開發者可以通過拖拽就可以快速地生産一個短視訊，使用方式就像易企秀或百度 H5 等 h5 低代碼平台一樣。shida的後端視訊合成部分是基于FFCreator進行開發的，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 頁面。使用者無需掌握複雜的程式設計技術，通過簡單拖拽、少量配置即可制作精美的頁面，可用于營銷場景下的頁面制作。同時，也為開發者提供了完備的程式設計接入能力，通過腳本群組件的形式獲得強大的元件行為和互動控制能力。
項目連結：https://github.com/ymm-tech/gods-pen
最新star：4247
10 luban-h5
魯班H5是基于Vue2.0開發的支援拖拽方式來快速生成頁面的低代碼平台，功能基本類似于易企秀、Maka、百度等H5平台。
項目連結：https://github.com/ly525/luban-h5
最新star：5654
11 mometa
mometa 并不是傳統主流的低代碼平台（如 amis），mometa 是面向研發、代碼可視設計編輯平台，更像是 dreamweaver、gui的可視編輯 工具。借助它，我們可以獲得所見即所得的可視編輯開發體驗。
項目連結：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 低代碼平台的開源替代方案，使用可視化工具進行模型設計, 頁面設計, 流程設計, 報表設計，隻需點選滑鼠，就能快速建立應用程式，實作靈活開發的新高度。在技術實作細節上，steedos-platform使用中繼資料定義對象，字段，配置，代碼，邏輯和頁面布局，并基于這些中繼資料自動生成系統的資料結構以及Steedos應用程式的使用者界面和自動化邏輯。
項目連結：https://github.com/steedos/steedos-platform/
最新star：951
14 lz-h5-edit
lz-h5-edit是一個H5低代碼編輯平台，支援拖拽、縮放、旋轉、動畫、撤銷、重做、組合元素等方式來建立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開發的通用海報生成器，可以用來快速地生成海報。使用時隻需要經過三步即可生成所需要的海報：啟動服務 > 編輯海報 > 生成代碼。
項目連結：https://github.com/psoho/fast-poster
最新star：408
17 openDataV
OpenDataV 是一款基于Vue3 + vite + TypeScript開發前端可視化低代碼平台。支援拖拽式、可視化、低代碼資料可視化開發，你可以用它自由的拼接成各種炫酷的大屏，同時支援接入開發者自己開發的元件接入平台。
項目連結：https://github.com/AnsGoo/openDataV
最新star：196
18 mall-cook
Mall-Cook 是一個基于 vue 開發的可視化商城搭建平台，包括多頁面可視化建構、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 項目中的元件，不需要二次開發就可以定義支援的元件以及元件的屬性，并且對元件的屬性和資料的關系以及表單的互動行為也可以通過設計器配置實作。
項目連結：https://github.com/fyl080801/vjdesign
最新star：384