老牌的組件庫(kù)

相信組件庫(kù)這東西大家都不陌生吧？ 組件庫(kù) 其實(shí)就是大佬們提前封裝好的一些組件的集合體，我們?cè)陧?xiàng)目中可以直接拿來(lái)使用，無(wú)論是 Element-UI 還是 Ant-Design，想使用無(wú)非就是分幾步：

• NPM安裝
• 頁(yè)面引入
• 使用組件

圖片

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

苦組件庫(kù)久矣？

為什么說(shuō)苦組件庫(kù)久矣呢？當(dāng)我們將Element-UI、Ant-Design這類(lèi)組件庫(kù)后，他們的代碼會(huì)在 node_modules中。

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

圖片

其實(shí)主要就是兩點(diǎn)：

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

其實(shí)還是有辦法的：

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

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

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

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

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

圖片

可惜，理想很美好，現(xiàn)實(shí)很骨感~因?yàn)檫@些組件庫(kù)里的代碼互相引用關(guān)系很復(fù)雜，所以你不可能很輕松把你想要的個(gè)別組件源碼復(fù)制到項(xiàng)目來(lái)，所以基本沒(méi)人這么做！

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

還真有，無(wú)頭組件庫(kù)（Headless Component Libraries） 橫空出世，它是一種新興的前端開(kāi)發(fā)模式，其核心在于將組件的邏輯和樣式分離。這種開(kāi)發(fā)模式允許開(kāi)發(fā)者在保持組件功能性的同時(shí)，完全控制組件的外觀和風(fēng)格，而不受特定UI框架的限制，優(yōu)點(diǎn)有：

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

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

Shadcn-UI

一個(gè)神級(jí)的無(wú)頭組件庫(kù)，無(wú)頭組件庫(kù)中的第一把交椅?。?！

它就是 Shadcn-UI！?。≡谌ツ甑淖钍軞g迎的 JavaScript 庫(kù)中，Shadcn-UI 奪下第一名，穩(wěn)壓Element-UI、Ant-Deisgn等一眾老牌組件庫(kù)。

圖片

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

圖片

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

目前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

這樣它就會(huì)把Button 這個(gè)組件放到你的項(xiàng)目中去。

圖片

圖片

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

圖片