2個(gè)常用后端UI框架集合匯總

更新時(shí)間：2020年02月18日16:19:06投稿：WDC

本文整理了一些比較流行的后端UI框架其中有VUE、bootstrap、jQuery等框架，，排行不分先后，僅供參考。可根據(jù)項(xiàng)目需求自行考慮

1、bootstrap

Bootstrap是Twitter推出的一個(gè)用于后端開發(fā)的，一個(gè)用于HTML、CSS和JS開發(fā)的開源工具包，是全球最受歡迎的后端組件庫(kù)，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的WEB項(xiàng)目。

官網(wǎng)：

文檔：

2、Layui

layui（譯音：類UI)是一款采用自身模塊規(guī)范編撰的后端UI框架，遵守原生HTML/CSS/JS的書寫與組織方式，門檻極低，用來即用。其外在極簡(jiǎn)，容積飄逸，組件亮澤，特別適宜界面的快速開發(fā)。layui兼容人類正在使用的全部瀏覽器（IE6/7除外），可作為PC端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開發(fā)方案。

官網(wǎng)：

事例：

3、MuseUI

MuseUI基于Vue2.0開發(fā)，一套MaterialDesign風(fēng)格開源組件庫(kù)，借以快速搭建頁面，擁有40多個(gè)UI組件，提供了自定義主題，充分滿足可多樣化的需求。

官網(wǎng)：

事例：#/zh-CN/

4、ViewUI

即原來的iView，是一套基于Vue.js的開源UI組件庫(kù)，主要服務(wù)于PC界面的中后臺(tái)產(chǎn)品。特征：豐富的組件和功能，滿足絕大部份網(wǎng)站場(chǎng)景；提供開箱即用的Admin系統(tǒng)和高階組件庫(kù)；提供專業(yè)、優(yōu)質(zhì)的一對(duì)一技術(shù)支持；細(xì)致、漂亮的UI，可自定義主題。

官網(wǎng)：

事例：

5、jQueryUI

jQueryUI是在jQueryJavaScript庫(kù)之上建立的一組精選的用戶界面交互，療效，小部件和主題。無論是建立高度交互的Web應(yīng)用程序，還是只須要向表單控件添加日期選擇器，jQueryUI都是理想的選擇。

官網(wǎng)：

事例：

6、EasyUI

EasyUI是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。

jQueryEasyUI提供便于使用的組件，它使Web開發(fā)人員能快速地在流行的jQuery核心和HTML5上構(gòu)建程序頁面。

EasyUIforAngular是基于原生的Angular5之上建立的，不須要其他外部JavaScript庫(kù)。

官網(wǎng)：

事例：

7、QuicKUI

QuicKUI4.0的組件庫(kù)包含了一百多種組件，一千多個(gè)應(yīng)用場(chǎng)景示例，涵蓋了web開發(fā)的各類應(yīng)用場(chǎng)景。組件的使用也都十分簡(jiǎn)單，能讓你的開發(fā)效率提升N倍。

官網(wǎng)：

事例：

8、ElementUi

Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品總監(jiān)打算的基于Vue2.0的桌面端組件庫(kù)。

官網(wǎng)：#/zh-CN/

事例：#/zh-CN/component/installation

9、At-UI

at-ui是一個(gè)模塊化的后端UI框架，開發(fā)基于Vue.js的快速和強(qiáng)悍的Web界面。專門為桌面應(yīng)用程序建立，AT-UI提供了一套npm+webpack+babel后端開發(fā)工作流程。它提供了一個(gè)體面的干凈整潔的UI組件。主要用于快速開發(fā)PC網(wǎng)站中后臺(tái)產(chǎn)品。

官網(wǎng)：#/zh

事例：#/zh/docs/introduction

10、antd

antd是基于AntDesign設(shè)計(jì)體系的ReactUI組件庫(kù)，主要用于研制企業(yè)級(jí)中后臺(tái)產(chǎn)品。開箱即用的高質(zhì)量React組件，全鏈路開發(fā)和設(shè)計(jì)工具體系，數(shù)十個(gè)國(guó)際化語言支持。

官網(wǎng)：

事例：

11、Material-UI

Material-UI是基于React的UI框架，更快速、更簡(jiǎn)便的web開發(fā)。官方市場(chǎng)中的中級(jí)主題——均以Material-UI為基礎(chǔ)。

官網(wǎng)：

事例：

12、VantWeapp

VantWeapp，是有贊后端團(tuán)隊(duì)開發(fā)維護(hù)，是聯(lián)通端Vue組件庫(kù)Vant的小程序版本，二者基于相同的視覺規(guī)范，提供一致的API插口，推動(dòng)開發(fā)者快速搭建小程序應(yīng)用。

官網(wǎng)：#/intro

更多關(guān)于后端UI框架請(qǐng)查看下邊的相關(guān)鏈接

天給大家分享一個(gè)功能強(qiáng)大的HTML5可視化頁面拖拽編排H5Dooring。

h5-dooring 一款開源免費(fèi)的H5在線頁面拖拽布局配置解決方案。讓你輕松實(shí)現(xiàn)拖拽式生成html5頁面。

DR演示視頻

簡(jiǎn)單演示如何通過拖拽快速生成可視化頁面，幫助大家更快上手項(xiàng)目。

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

技術(shù)框架

• react+dva+axios
• antd React UI組件庫(kù)
• react-dnd 基于react拖拽組件解決方案
• qrcode.react 基于react二維碼插件
• koa 基于nodejs開發(fā)框架
• ramda 優(yōu)秀函數(shù)式j(luò)s工具庫(kù)

快速安裝

# 克隆項(xiàng)目
git clone https://github.com/MrXujiang/h5-Dooring.git

# 進(jìn)入目錄
cd h5-Dooring

# 安裝依賴包
npm install

# 本地啟動(dòng)
npm run start

通過輕松拖拽的方式實(shí)現(xiàn)生成H5頁面，并提供豐富的頁面組件，讓開發(fā)者快速搭建更強(qiáng)大的H5落地頁。

ending，附上項(xiàng)目地址鏈接。

# 官網(wǎng)地址
http://io.nainor.com/

# 倉(cāng)庫(kù)地址
https://github.com/MrXujiang/h5-Dooring

ok，這次就分享到這里。感興趣的同學(xué)可以去看看，歡迎交流討論哈！