推薦20個開源的前端低代碼項目

語言: CN / TW / HK

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

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

1,Appsmith

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

Build-UI.gif

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

2,LowCodeEngine

LowCodeEngine 由阿里巴巴釘釘宜搭團隊開發的低代碼框架,基於阿里雲的雲基礎設施和釘釘的企業數字化操作系統。使用者只需要基於低代碼引擎便可以快速定製符合自己業務需求的低代碼平台。同時LowCodeEngine還提供了很多的基礎組件,可以幫助開發者快速的構建業務頁面。

image.png

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

3,Amis

Amis 是百度開源的一款前端低代碼框架,通過 JSON 配置就能生成各種後台頁面,包括數據獲取、表單提交及驗證等功能,同時,Amis內置 100+ 種 UI 組件,能夠滿足各種頁面組件展現的需求,極大減少開發成本,甚至可以不需要了解前端。

amis 在百度內部得到了廣泛使用,在 4 年多的時間裏創建了 3w 多頁面,從內容審核到機器管理,從數據分析到模型訓練,amis 滿足了各種各樣的頁面需求。我們可以下載源碼,然後使用如下的命令來體驗。

```

安裝項目 npm 依賴,在 node 12 下會有報錯但不影響正常使用。

npm i --legacy-peer-deps

啟動項目,等編譯結束後通過 http://127.0.0.1:8888/examples/pages/simple 訪問。

npm start ```

image.png  

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

4,tmagic-editor

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

image.png

項目鏈接:https://gitee.com/webapp_qsr/tmagic-editor

5,dooring-electron-lowcode

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

image.png

和它一樣的還有H5-Dooring,H5-Dooring是一款功能強大、專業可靠的H5可視化頁面配置解決方案,致力於提供一套簡單方便、專業可靠、無限可能的H5落地頁最佳實踐。技術棧以 React 和 TypeScript 為主,後台採用nodejs開發。除了 H5 版,還提供了 PC 版。

image.png

6,vite-vue3-lowcode

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

68747470733a2f2f7a332e617831782e636f6d2f323032312f30372f30372f52486642626e2e676966.gif

7,shida

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

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

8,quark-h5

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

image.png

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

9,gods-pen

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

image.png

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

10,luban-h5

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

image.png

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

11,mometa

mometa 並不是傳統主流的低代碼平台(如 amis),mometa 是面向研發、代碼可視設計編輯平台,更像是 dreamweaver、gui的可視編輯 工具。藉助它,我們可以獲得所見即所得的可視編輯開發體驗。

mometa-insert-material.gif  項目鏈接:https://github.com/imcuttle/mometa

12,h5-factory

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

image.png

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

13,steedos-platform

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

image.png

不過,steedos-platform是一整套的低代碼解決方案,如果需要單獨開發或者部署需要同時具備前後端架構的能力。

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

14,lz-h5-edit

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

image.png

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

15,tefact

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

show.gif

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

16,fast-poster

fast-poster是一款使用Python+Vue開發的通用海報生成器,可以用來快速的生成海報。使用時知需要經過三步即可生成所需要的海報:啟動服務 > 編輯海報 > 生成代碼。

image.png

項目鏈接:https://gitee.com/vitojc/fast-poster

17,openDataV

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

2.gif

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

18,mall-cook

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

MallCook-Build.gif

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

19,form-generator

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

image.png

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

20,vjdesign

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

image.png

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

除了上面部分開源的低代碼平台外,還有很多是不開源的,具體參考下面的鏈接:https://github.com/taowen/awesome-lowcode

本文正在參加「金石計劃 . 瓜分6萬現金大獎」