前端是一個一直在發展的名詞，從最初刀耕火種時代的頁面仔到文藝復興時期的前端工程化再到如今新時代的大前端，前端技術在某種程度上似乎可以為所欲為了。但是我們這次討論的是前端技術中的一部分—元件庫。

什麼是元件？為什麼要用元件庫？

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

下面我就給大家推薦從 HelloGitHub 往期月刊（100+JS專案）中篩選出來的 5 個常用且流行的企業級元件庫。

1、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 元件，這樣在設計和出圖都會是一致了

2、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(線上編輯器)

3、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次的提交。

程式碼層面：專案中包含詳細的文件、測試、例子，但是具體的程式碼細節我還要進一步研究