技術分享 | 6個前端工程師私藏的元件庫

嗨 我是森妮

非常謝謝這幾日大家的追蹤，很感動短短幾日就有20個人追蹤

這幾年觀察前端職缺比例，Vue跟React漸漸比Angular還要更多

最近部門聚會認識幾位厲害的前端工程師，經過幾天的四處拜師學藝，得到今天要跟大家分享的「6個前端工程師私藏的元件庫」！

每個元件庫所支援的前端框架不同，這篇文章也會包含元件簡介、怎麼找尋自己需要的資源說明！

什麼是元件(Component)？

在我們使用的網站中，一個頁面會是由好幾個部份，例如按鈕、菜單、表格、卡片

網站只要越龐大就越是重視架構，舉例來說：「我們從網站所有看到相同的按鈕是個別設定？」還是「統一設定可以重複使用？」，在不同的畫面重複使用的就稱為元件(Component)

可以怎麼找到相關的資源？

元件庫會建議搜尋「(前端框架名稱) + Component library」可以找到許多提供的網站

如果想找特定的元件，例如Button會建議搜尋「(前端框架名稱) + Component (元件名稱/ex:Button)」

平時我也會在找尋資源的過程，除了使用也一併把這些資料收集，下次要使用就可以優先從這些網站取得

工程師私藏的元件庫

初學者基本的元件概念也相當重要，但在前端工程師的工作中已經有許多網站提供這些設計好的元件可以直接使用，以下是經過幾位前端工程師推薦的元件庫

【React】

1.Grommet

https://v2.grommet.io/components

初學者友善的資源，提供比較少見的元件類型，dashboard常見的圖表也有提供！缺點是元件的靈活度較低，可以調整的幅度不大

2.Mui

https://mui.com/zh/

提供的元件靈活度高，尋找多樣化元件的最佳選擇，缺點說明較少，建議已經有基礎技術使用

3.Evergreen

https://evergreen.segment.com/

提供的元件很全面，不論自學還是工作都非常夠用的元件庫，可以看到許多平時操作網頁會看到的元件

【Vue】

1.Buefy

https://buefy.org/

初學者友善的資源已具備RWD，基礎學習上所需要用到的資源都有提供，輕量級的元件庫使用容量少於100KB

2.Vuesax

https://vuesax.com/

所有元件的顏色、形狀和設計都是獨立調整，靈活度高但使用起來也相當便利

【Angular】

1.Material

https://material.angular.io/

初學者友善的資源，提供HTML、TS、CSS三種方式去使用裡面的元件，基本學習會使用到的元件都有提供

希望大家喜歡今天的分享，有想看的主題也歡迎留言告訴我💬

instagram：@xenialin.tw email：xenialin.tw@gmail.com