老牌的組件庫

相信組件庫這東西大家都不陌生吧？ 組件庫 其實就是大佬們提前封裝好的一些組件的集合體，我們在項目中可以直接拿來使用，無論是 Element-UI 還是 Ant-Design，想使用無非就是分幾步：

• NPM安裝
• 頁面引入
• 使用組件

圖片

這也是我們現在大部分項目都在使用組件庫的方式，但是說實話，大家真的苦這種方式久矣。

苦組件庫久矣？

為什么說苦組件庫久矣呢？當我們將Element-UI、Ant-Design這類組件庫后，他們的代碼會在 node_modules中。

但是大家都懂，組件庫的功能或者樣式不一定符合我們項目業務的要求，但是我們又不能直接修改node_modules中的源碼，那咋辦呢？

圖片

其實主要就是兩點：

• 組件庫的功能不符合業務需要咋辦？
• 組件庫的樣式不符合UI設計稿咋辦？

其實還是有辦法的：

• 樣式不滿意，我們可以在頁面中去使用樣式覆蓋
• 功能不滿意，我們可以給組件庫提issue，然后等待作者去增加；或者可以通過一些類似pacth-package這種工具去給node_modules中的源碼打補丁，從而達到修改源碼的效果。

但是始終不是我想要的~我以前就有一個想法~

為啥不直接把源碼復制到項目中？

我以前就有一個想法，我們使用一個組件庫或者庫的時候，為啥不直接把他們的源碼復制到項目中呢？

就拿組件庫來說吧，比如我項目只需要使用Buttom、Input、Select這些組件，那我可以直接從組件庫中把這些組件的源碼復制到項目來，那我既可以使用這些組件，我又可以隨便改這些組件的源碼樣式，從而達到我想要的效果。

圖片

可惜，理想很美好，現實很骨感~因為這些組件庫里的代碼互相引用關系很復雜，所以你不可能很輕松把你想要的個別組件源碼復制到項目來，所以基本沒人這么做！

既然自己復制不了，那有沒有組件庫能提供這樣的命令呢，比如運行一個ui add Button就可以把組件庫的Button組件源碼復制到項目中呢？

還真有，無頭組件庫（Headless Component Libraries） 橫空出世，它是一種新興的前端開發模式，其核心在于將組件的邏輯和樣式分離。這種開發模式允許開發者在保持組件功能性的同時，完全控制組件的外觀和風格，而不受特定UI框架的限制，優點有：

• 高度的靈活性和可定制性
• 輕量級和性能優化
• 提高開發效率
• 高度的可組合性

總結為一句話就是：無頭組件庫為你提供組件的基本架子，你可以隨心所欲修改架子，修改樣式，修改邏輯，已達到你的要求。

Shadcn-UI

一個神級的無頭組件庫，無頭組件庫中的第一把交椅！！！

它就是 Shadcn-UI！！！在去年的最受歡迎的 JavaScript 庫中，Shadcn-UI 奪下第一名，穩壓Element-UI、Ant-Deisgn等一眾老牌組件庫。

圖片

截止目前，github 上已經有 67k stars。

圖片

Shadcn-UI 使用了 tailwindcss來當做預設CSS，所以當你自定義樣式時會非常方便。

目前React、Vue 版本都有：

React 版本文檔：https://ui.shadcn.com/ Vue

版本文檔：https://www.shadcn-vue.com/

圖片

想要使用 Shadcn-UI 你得先初始化一些配置，比如 tailwindcss。

圖片

接著你只需要使用命令。

npx shadcn-ui@latest init

比如你想使用 Button 組件，你可以使用命令行。

npx shadcn-ui@latest add button

這樣它就會把Button 這個組件放到你的項目中去。

圖片

圖片

使用的話可以直接引入使用，你如果對他預設的 CSS 和 功能不滿意，你也可以直接去到 button.tsx 中去修改。

圖片