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

更新 發佈閱讀 3 分鐘
raw-image

嗨 我是森妮

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

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

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

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

raw-image

什麼是元件(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


留言
avatar-img
留言分享你的想法!
avatar-img
森妮後端工程師日常的沙龍
18會員
9內容數
如何成為後端工程師,後端工程師的技術分享!
你可能也想看
Thumbnail
Vue3 學習筆記,元件與資料傳遞篇
Thumbnail
Vue3 學習筆記,元件與資料傳遞篇
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
Thumbnail
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
在我們使用的網站中,一個頁面會是由好幾個部份,例如按鈕、菜單、表格、卡片,這些部份可以在不同的畫面重複使用的就稱為元件(Component),今天要跟大家分享的「6個前端工程師私藏的元件庫」!
Thumbnail
在我們使用的網站中,一個頁面會是由好幾個部份,例如按鈕、菜單、表格、卡片,這些部份可以在不同的畫面重複使用的就稱為元件(Component),今天要跟大家分享的「6個前端工程師私藏的元件庫」!
Thumbnail
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。
Thumbnail
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News