文約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

SCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這里分享給大家，權當拋磚引玉，歡迎有更多的朋友分享更多的技術知識。

1.輸入html:5，然后按tab鍵或回車（Enter）鍵，效果如下：

注：輸入感嘆號"!"，然后按Tab鍵或者回車（Enter）鍵也可以生成html骨架。

2.輸入link:css引入css樣式文件，link:favicon引入網站logo，輸入script:src引入js

3.輸入標簽名自動補齊

直接輸入標簽名后回車

4.使用"#“輸入id，”.“輸入class，”[]"輸入屬性

<!-- 輸入div#main回車 -->
<div id="main"></div>
<!-- 輸入div.content回車 -->
<div class="content"></div>
<!-- 輸入div#main.content回車 -->
<div id="main" class="content"></div>
<!-- img[src=1.jpg][alt=pic1] -->
<img src="1.jpg" alt="pic1">

5.使用">“輸入嵌套標簽，”+" 輸入并列的兄弟標簽，"^"上級元素

<!-- 輸入div#parent>div#child回車 -->
<div id="parent">
        <div id="child"></div>
</div>

<!-- 輸入div#bro1+div#bro2回車 -->
<div id="bro1"></div>
<div id="bro2"></div>

<!-- 輸入div#sup>div#child+div#bro^div#sub回車 -->
<div id="sup">
  <div id="child"></div>
<div id="bro"></div>
</div>
<div id="sub"></div>

6.使用{}輸入標簽中的文本

<!-- div#main{input sth here} -->
<div id="main">input sth here</div>

7.使用"()"對標簽分組及使用"*"生成多個相同的標簽

<!-- (div#list1>ul>li*2)+(div#list2>ul>li*3) -->
<div id="list1">
  <ul>
  	<li></li>
		<li></li>
	</ul>
</div>
<div id="list2">
  <ul>
  	<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

8.使用自增符號$

<!-- $ 自增符號 -->
<!-- ul>li*3>img[src=./imgs/$.jpg][alt=img$] -->
<ul>
  <li><img src="./imgs/1.jpg" alt="img1"></li>
	<li><img src="./imgs/2.jpg" alt="img2"></li>
	<li><img src="./imgs/3.jpg" alt="img3"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$.jpg][alt=img$$] -->
<ul>
  <li><img src="./imgs/01.jpg" alt="img01"></li>
	<li><img src="./imgs/02.jpg" alt="img02"></li>
	<li><img src="./imgs/03.jpg" alt="img 03"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$$.jpg][alt=img$$$] -->
<ul>
  <li><img src="./imgs/001.jpg" alt="img001"></li>
	<li><img src="./imgs/002.jpg" alt="img002"></li>
	<li><img src="./imgs/003.jpg" alt="img003"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt=img$$@4] -->
<ul>
  <li><img src="./imgs/04.jpg" alt="img04"></li>
	<li><img src="./imgs/05.jpg" alt="img05"></li>
	<li><img src="./imgs/06.jpg" alt="img06"></li>
</ul>

依此類推……

以上這些快捷操作是因為VS Code自帶有Emmet插件。

Emmet插件非常強大，還有很多用法，大家還知道哪些呢，期待大家的分享。