技術分享 | 6個前端工程師私藏的元件庫
嗨 我是森妮
非常謝謝這幾日大家的追蹤，很感動短短幾日就有20個人追蹤
這幾年觀察前端職缺比例，Vue跟React漸漸比Angular還要更多
最近部門聚會認識幾位厲害的前端工程師，經過幾天的四處拜師學藝，得到今天要跟大家分享的「6個前端工程師私藏的元件庫」！
每個元件庫所支援的前端框架不同，這篇文章也會包含元件簡介、怎麼找尋自己需要的資源說明！
什麼是元件(Component)？
在我們使用的網站中，一個頁面會是由好幾個部份，例如按鈕、菜單、表格、卡片
網站只要越龐大就越是重視架構，舉例來說：「我們從網站所有看到相同的按鈕是個別設定？」還是「統一設定可以重複使用？」，在不同的畫面重複使用的就稱為元件(Component)
可以怎麼找到相關的資源？
元件庫會建議搜尋「(前端框架名稱) + Component library」可以找到許多提供的網站
如果想找特定的元件，例如Button會建議搜尋「(前端框架名稱) + Component (元件名稱/ex:Button)」
平時我也會在找尋資源的過程，除了使用也一併把這些資料收集，下次要使用就可以優先從這些網站取得
工程師私藏的元件庫
初學者基本的元件概念也相當重要，但在前端工程師的工作中已經有許多網站提供這些設計好的元件可以直接使用，以下是經過幾位前端工程師推薦的元件庫
【React】
1.Grommet
初學者友善的資源，提供比較少見的元件類型，dashboard常見的圖表也有提供！缺點是元件的靈活度較低，可以調整的幅度不大
2.Mui
提供的元件靈活度高，尋找多樣化元件的最佳選擇，缺點說明較少，建議已經有基礎技術使用
3.Evergreen
提供的元件很全面，不論自學還是工作都非常夠用的元件庫，可以看到許多平時操作網頁會看到的元件
【Vue】
1.Buefy
初學者友善的資源已具備RWD，基礎學習上所需要用到的資源都有提供，輕量級的元件庫使用容量少於100KB
2.Vuesax
所有元件的顏色、形狀和設計都是獨立調整，靈活度高但使用起來也相當便利
【Angular】
1.Material
初學者友善的資源，提供HTML、TS、CSS三種方式去使用裡面的元件，基本學習會使用到的元件都有提供
希望大家喜歡今天的分享，有想看的主題也歡迎留言告訴我💬
instagram：@xenialin.tw
email：xenialin.tw@gmail.com
email：xenialin.tw@gmail.com
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在 TypeScript 中，套件是模組化代碼的集合，可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架，如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
這系列是我在 2023 六角學院 Vue作品實戰班的筆記，筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ，其中包含單筆資料、多筆資料。
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
在 Vue 中，組件是構建應用程式的基本單位，而 props 是組件間傳遞資料的主要方式之一，本文將介紹 Vue 中的 props，並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
在 2021 年的剛轉職成為前端工程師的時候，我在面試時滿常會被詢問到 JavaScript 中閉包的議題，當時候自己回答的滿差的，於是在 2022 年時，我寫了一系列的有關於函式程式設計鐵人賽的文章， 裡頭就有簡單提到有關於閉包的議題。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在 TypeScript 中，套件是模組化代碼的集合，可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架，如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
這系列是我在 2023 六角學院 Vue作品實戰班的筆記，筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ，其中包含單筆資料、多筆資料。
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
在 Vue 中，組件是構建應用程式的基本單位，而 props 是組件間傳遞資料的主要方式之一，本文將介紹 Vue 中的 props，並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
在 2021 年的剛轉職成為前端工程師的時候，我在面試時滿常會被詢問到 JavaScript 中閉包的議題，當時候自己回答的滿差的，於是在 2022 年時，我寫了一系列的有關於函式程式設計鐵人賽的文章， 裡頭就有簡單提到有關於閉包的議題。