快捷導(dǎo)航

12個(gè)常用前端UI框架集合匯總

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

本文整理了一些比較流行的前端UI框架其中有VUE、bootstrap、jQuery等框架，，排名不分先后，僅供參考?？砂凑枕?xiàng)目需求自行考慮

1、bootstrap

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

官網(wǎng)：https://v4.bootcss.com/

文檔：https://v4.bootcss.com/docs/getting-started/introduction/

2、Layui

layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架，遵循原生 HTML/CSS/JS 的書(shū)寫(xiě)與組織形式，門檻極低，拿來(lái)即用。其外在極簡(jiǎn)，體積輕盈，組件豐盈，非常適合界面的快速開(kāi)發(fā)。layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開(kāi)發(fā)方案。

官網(wǎng)：https://www.layui.com/

例子：https://www.layui.com/admin/std/dist/views/

3、MuseUI

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

官網(wǎng)：https://muse-ui.org/

例子：https://muse-ui.org/#/zh-CN/

4、View UI

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

官網(wǎng)：https://www.iviewui.com/

例子：https://www.iviewui.com/docs/introduce

5、jQueryUI

jQuery UI是在jQuery JavaScript庫(kù)之上構(gòu)建的一組精選的用戶界面交互，效果，小部件和主題。無(wú)論是構(gòu)建高度交互的Web應(yīng)用程序，還是只需要向表單控件添加日期選擇器，jQuery UI都是理想的選擇。

官網(wǎng)：https://jqueryui.com/

例子：https://jqueryui.com/demos/

6、EasyUI

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

jQuery EasyUI 提供易于使用的組件，它使 Web 開(kāi)發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁(yè)面。

EasyUI for Angular是基于原生的Angular 5之上構(gòu)建的，不需要其他外部JavaScript庫(kù)。

官網(wǎng)：http://www.jeasyui.net/

例子：http://www.jeasyui.net/demo/380.html

7、QuicK UI

QuicK UI 4.0 的組件庫(kù)包含了一百多種組件，一千多個(gè)應(yīng)用場(chǎng)景示例，囊括了web開(kāi)發(fā)的各種應(yīng)用場(chǎng)景。組件的使用也都非常簡(jiǎn)單，能讓你的開(kāi)發(fā)效率提高N倍。

官網(wǎng)：http://www.uileader.com/product_quickui.html

例子：http://www.uileader.com/quickui/system/main/main.jsp

8、Element Ui

Element，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0的桌面端組件庫(kù)。

官網(wǎng)：https://element.eleme.cn/#/zh-CN/

例子：https://element.eleme.cn/#/zh-CN/component/installation

9、At-UI

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

官網(wǎng)：https://at-ui.github.io/at-ui/#/zh

例子：https://at-ui.github.io/at-ui/#/zh/docs/introduction

10、antd

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

官網(wǎng)：https://ant.design/index-cn

例子：https://ant.design/docs/react/introduce-cn