想作前端開發？推薦幾個必備珍品組件庫

前端是一個一直在發展的名詞，從最初刀耕火種時代的頁面仔到文藝復興時期的前端工程化再到現在新時代的大前端，前端技術在某種程度上彷佛能夠隨心所欲了。可是咱們此次討論的是前端技術中的一部分—組件庫。

什麼是組件？爲何要用組件庫？

組件是組成頁面中最基本的元素，按鈕，輸入框，下拉選擇都是組件，組件和組件組合就變成了一個更復雜的組件。至於爲何要用組件庫我想應該是體驗了，用戶使用體驗以及開發人員的開發體驗，用戶在頁面上的交互都是經過組件，一個顏值高的組件能夠第一眼吸引用戶去點擊，這就是用戶體驗，開發體驗更不用說，組件就是同種類型不一樣交互的封裝，是用組件庫可讓咱們更專一的針對業務的開發和產品的交互。

下面我就給你們推薦從 HelloGitHub 往期月刊（100+JS項目）中篩選出來的 5 個經常使用且流行的企業級組件庫。

一、Ant-Design

類型：基於 React 組件庫

官網：https://ant.design/index-cn

GitHub倉庫地址：https://github.com/ant-design/ant-design

維護團隊：螞蟻金服體驗技術部

ant-design 是我常用的組件庫之一，螞蟻開源，大牛維護，4W 多的 Star 讓這款組件庫成爲國內使用率較高的 React 組件庫。可是細看這套組件庫的靈魂是維護團隊提出了一個設計語言的概念，也就是說組件庫的全部交互樣式都是遵循這套設計語實現的，14px 的主字體，類別的對齊，簡潔直接的設計風格都決定了這套組件庫在用戶體驗上的亮眼。

代碼層面：組件庫由 TS+React 的組合實現，看代碼能夠知道，維護團隊在開發 ant-design 以前就已經在維護 rc-components 的倉庫了，能夠說 ant-design 是對 rc-components 的進一步封裝。從學習的角度來講須要熟悉React高級特性以及 TypeScript 語法。

生態：ant-design 的生態周邊比較好，維護方提供了基於 ant-design 的開箱即用的中臺前端/設計解決方案，裏面包括了一系列中臺須要的業務邏輯。並且框架還提供了一套 sketch 組件，這樣在設計和出圖都會是一致了

二、iView

類型：基於 Vue 組件庫

官網：https://www.iviewui.com/

GitHub倉庫地址：https://github.com/iview/iview

維護團隊：Aresn (Talking Data)

iView 是我在寫 Vue 的時候使用到的組件庫，能夠說看了 iView 的源碼後對 Vue 的組件開發有了一些認識，iView 是 Aresn 我的發起的 Vue 組件庫項目，從最開始的單純的 Vue 組件庫到如今的覆蓋小程序，中臺，移動端，以及開箱即用的種子項目擁有一系列的生態。

代碼層面：總體文件結構清晰，組件實現也十分清楚，template，script 標準 Vue 結構。適合瞭解 Vue 後想進一步進階者學習。

生態：iview-admin(開箱即用的中臺解決方案)，iview-Weapp(微信小程序組件庫)，iview Run(在線編輯器)

三、MATERIAL-UI

類型：基於 React 組件庫

官網：https://material-ui.com/

GitHub倉庫地址：https://github.com/mui-org/material-ui

維護團隊：material-ui

material-ui 是基於 Google Material Design (須要FQ)設計語言開發的 React UI 組件庫。好像國內的公司較少用這套組件庫，感受扁平化風格看多了後再看 Material 風格有一種眼前一亮的感受。

material-ui 團隊維護頻率很高，下圖是 material-ui 主要的開發者的Github首頁

基本上天天的都會有提交，並且最多一天有36次的提交。

代碼層面：項目中包含詳細的文檔、測試、例子，可是具體的代碼細節我還要進一步研究🤣

生態：Material-UI Pickers(日期，時間選擇器)

四、ElementUI

類型：基於 Vue 的組件庫

官網：https://element.eleme.cn/#/zh-CN

GitHub倉庫地址：https://github.com/ElemeFE/element

維護團隊：餓了麼FE

ElementUI 是餓了麼基於 Vue 開發的桌面端組件庫，目前官網顯示最新版本爲 2.9，我當時使用的是 2.5 版本。ElementUI 也提供了設計原則，組件庫總體設計風格扁平化，而且能夠定製本身主題顏色。組件數量上基本覆蓋了中臺平常須要使用的組件

代碼層面：文件結構清晰，組件的定義簡潔明瞭，適合學習

生態：mint-ui (Mobile UI elements for Vue.js) element-angular (element angular版本) element-react (React 版本)

五、Taro

類型：多端開發框架

官網：https://taro.aotu.io/

GitHub倉庫地址：https://github.com/NervJS/taro

維護團隊：O2 JDC

Taro 是一款使用 React 開發方式開發跨度應用框架。一次編寫多端運行，提供了 H五、小程序、RN 組件庫。目前最新版本在小程序以及 H5 RN 開發體驗也是十分好的。

生態：官網提供了物料市場，組件庫，若是寫小程序能夠推薦嘗試

最後

歡迎關注 HelloGitHub 公衆號，獲取更多開源項目的資料和內容。 HelloGitHub 連載三年，已經得到超過 1 萬顆⭐ 後臺回覆「加羣」，一塊兒討論技術有趣的事情。分享本文給你的朋友們吧 🤗