目前有很多css框架，例如bootstrap、bulma、semantic ui等。這可以加快構(gòu)建顯示（用戶界面）的速度。目前流行的 css 工具之一是 shadcn/ui，它之前是什么？
在其官方網(wǎng)站shadcn/ui上表示
“我們可以復(fù)制并粘貼到我們的應(yīng)用程序中的可重用組件的集合。”
所以 shadcn/ui 是視圖中可重用組件的集合，使用 tailwindcss 和 radixui 構(gòu)建。目前支持next.js、laravel等多個(gè)框架。可以在官網(wǎng)shadcn/ui上看到。
來(lái)自支持的許多框架。我們的主要目標(biāo)是如何使用 laravel breeze 在 laravel react 上安裝 shadcn/ui。
第一步：安裝laravel項(xiàng)目。
laravel new laravel-shadcn
登錄后復(fù)制
這里我們使用 laravel 安裝程序（全局）。在下一階段，我們將被要求選擇一個(gè)選項(xiàng)，如下圖所示
根據(jù)您的項(xiàng)目需求填寫。如果是這樣，請(qǐng)等待安裝完成。安裝速度取決于您的互聯(lián)網(wǎng)連接。
laravel 項(xiàng)目安裝完成。好的繼續(xù)！.
第二步：在laravel項(xiàng)目上安裝shadcn/ui
仍然在同一個(gè)航站樓。首先，輸入以下命令：
cd laravel-shadcn npx shadcn-ui@latest init
登錄后復(fù)制
如果是這樣，就會(huì)出現(xiàn)一個(gè)請(qǐng)求，根據(jù)您的需要填寫。如下例所示。
would you like to use typescript (recommended)? no which style would you like to use? ? default which color would you like to use as base color? ? slate where is your global css file? ? resources/css/app.css do you want to use css variables for colors? ? yes where is your tailwind.config.js located? ? tailwind.config.js configure the import alias for components: ? @/components configure the import alias for utils: ? @/lib/utils are you using react server components? ? no
登錄后復(fù)制
如果您是 typescript 用戶，您可以選擇是、確定、下一步。轉(zhuǎn)到 vscode 或根據(jù)您最喜歡的代碼編輯器。這里我使用 vscode 然后只需使用以下命令
cd laravel-shadcn code .
登錄后復(fù)制
它將自動(dòng)打開 vscode 以及打開你的 laravel 項(xiàng)目。如果是這樣，下一步就是打開resource/css/app.css文件夾中的app.css文件，確保shadcnui已經(jīng)成功安裝在我們的laravel項(xiàng)目中
上圖中shadcn已經(jīng)成功安裝到我們的laravel項(xiàng)目上
說(shuō)明：
shadcn會(huì)自動(dòng)更新app.css文件
當(dāng)我們需要按鈕、警報(bào)、表格等組件時(shí)。然后我們需要通過(guò) laravel 項(xiàng)目的根終端安裝它。 （需要互聯(lián)網(wǎng)連接）
您需要的所有組件都可以在shadcnui官方網(wǎng)站上看到
當(dāng)你安裝完組件后，我們會(huì)在resources/js/components/ui/button.jsx文件夾中自動(dòng)生成一個(gè)新文件，我們也可以根據(jù)自己的意愿修改這個(gè)文件。
第三步：確保shadcn已安裝
為了確保 shadcnui 已安裝，我們可以在終端中發(fā)出命令。即例如我們要安裝按鈕組件，命令是：npx shadcn-ui@latest 添加按鈕如下圖所示
然后打開welcome.jsx文件并按照下圖操作。
如果是這樣的話。打開兩個(gè)具有相同目錄的終端，即 laravel-shadcn
1號(hào)航站樓
npm run dev
登錄后復(fù)制
2號(hào)航站樓
php artisan serve
登錄后復(fù)制
然后在瀏覽器中打開它，就會(huì)出現(xiàn)按鈕組件，它是
默認(rèn)顏色深色。
