老牌的組件庫

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

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

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

苦組件庫久矣？

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

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

其實主要就是兩點：

• 組件庫的功能不符合業(yè)務(wù)需要咋辦？
• 組件庫的樣式不符合UI設(shè)計稿咋辦？

其實還是有辦法的：

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

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

為啥不直接把源碼復(fù)制到項目中？

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

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

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

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

還真有，無頭組件庫（Headless Component Libraries） 橫空出世，它是一種新興的前端開發(fā)模式，其核心在于將組件的邏輯和樣式分離。

這種開發(fā)模式允許開發(fā)者在保持組件功能性的同時，完全控制組件的外觀和風(fēng)格，而不受特定UI框架的限制，優(yōu)點有：

• 高度的靈活性和可定制性
• 輕量級和性能優(yōu)化
• 提高開發(fā)效率
• 高度的可組合性

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

Shadcn-UI

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

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

截止目前，github 上已經(jīng)有 67k stars

Shadcn-UI 使用了 tailwindcss來當(dāng)做預(yù)設(shè)CSS，所以當(dāng)你自定義樣式時會非常方便

目前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 這個組件放到你的項目中去

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