技術分享 | 6個前端工程師私藏的元件庫
閱讀時間約 2 分鐘
嗨 我是森妮
非常謝謝這幾日大家的追蹤，很感動短短幾日就有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：[email protected]
email：[email protected]
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
這篇文章將會講述新一代（young designer's exhibition 2024）的參賽與參展心得與體悟：從新一代概述到會場四天的分享，最後談談我的體悟與經驗。
俞璇的Kdan實習體驗：揭示新創公司文化和職場成長。
深入探討選擇Kdan的動機、申請流程、以及加入團隊後的學習和挑戰。她的故事為尋找實習機會的學生提供寶貴洞見，強調適應新環境和職場技能的重要性。
不管是像RaaS一鍵發鏈、抽象帳戶標準的推出、Intent-centric的概念、telegram bot的爆紅，到最近的Mr.Beast NFT事件。 似乎都在說明開發應用的門檻將會越來越低，使用者入圈的方式越來越便利!這樣會迎來什麼改變呢?
我們在之前有介紹過社群工具的使用方法，這邊就來做一個進階版的X使用方法介紹吧!由於X是獲取幣圈第一手資訊的集中地，但我們追蹤了這麼多的帳號一定無法有效地閱讀所有推文，Lists列表的功能雖然有效的幫助我們將帳號分類，但卻一定程度的限制了X的使用性，但現在有了X pro一切都不一樣了!
本篇整理自：如何用『心流』幫你成功 |《不可能的藝術》讀書分享
是我很喜歡的一位YTR-MoneyXYZ，解說的內容時常很豐富、有深度，所以也透過這篇筆記紀錄來增加我的理解。
本篇重點筆記：
勇於挑戰→將任務拆解→讓小任務在「能力挑戰最優點」→心流→保持狀態→確保自己在往目標靠近的路徑上
文中有免費的Notion模板，文末有關於Obsidian的關聯單字筆記術，專門給和我一樣，覺得背單字好無聊、總是無法順利使用出來的人。
在某個暑假，吐司編前往了日本東京，即便身處陽光灑落的商店街，或是波光粼粼的濱海商場，都無法掩蓋一個令人心痛的現實：我竟然無法運用日語單字！
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
這篇文章將會講述新一代（young designer's exhibition 2024）的參賽與參展心得與體悟：從新一代概述到會場四天的分享，最後談談我的體悟與經驗。
俞璇的Kdan實習體驗：揭示新創公司文化和職場成長。
深入探討選擇Kdan的動機、申請流程、以及加入團隊後的學習和挑戰。她的故事為尋找實習機會的學生提供寶貴洞見，強調適應新環境和職場技能的重要性。
不管是像RaaS一鍵發鏈、抽象帳戶標準的推出、Intent-centric的概念、telegram bot的爆紅，到最近的Mr.Beast NFT事件。 似乎都在說明開發應用的門檻將會越來越低，使用者入圈的方式越來越便利!這樣會迎來什麼改變呢?
我們在之前有介紹過社群工具的使用方法，這邊就來做一個進階版的X使用方法介紹吧!由於X是獲取幣圈第一手資訊的集中地，但我們追蹤了這麼多的帳號一定無法有效地閱讀所有推文，Lists列表的功能雖然有效的幫助我們將帳號分類，但卻一定程度的限制了X的使用性，但現在有了X pro一切都不一樣了!
本篇整理自：如何用『心流』幫你成功 |《不可能的藝術》讀書分享
是我很喜歡的一位YTR-MoneyXYZ，解說的內容時常很豐富、有深度，所以也透過這篇筆記紀錄來增加我的理解。
本篇重點筆記：
勇於挑戰→將任務拆解→讓小任務在「能力挑戰最優點」→心流→保持狀態→確保自己在往目標靠近的路徑上
文中有免費的Notion模板，文末有關於Obsidian的關聯單字筆記術，專門給和我一樣，覺得背單字好無聊、總是無法順利使用出來的人。
在某個暑假，吐司編前往了日本東京，即便身處陽光灑落的商店街，或是波光粼粼的濱海商場，都無法掩蓋一個令人心痛的現實：我竟然無法運用日語單字！