目前有很多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等多個框架。可以在官網(wǎng)shadcn/ui上看到。
來自支持的許多框架。我們的主要目標(biāo)是如何使用 laravel breeze 在 laravel react 上安裝 shadcn/ui。
第一步：安裝laravel項目。
laravel new laravel-shadcn
登錄后復(fù)制
這里我們使用 laravel 安裝程序（全局）。在下一階段，我們將被要求選擇一個選項，如下圖所示
根據(jù)您的項目需求填寫。如果是這樣，請等待安裝完成。安裝速度取決于您的互聯(lián)網(wǎng)連接。
laravel 項目安裝完成。好的繼續(xù)！.
第二步：在laravel項目上安裝shadcn/ui
仍然在同一個航站樓。首先，輸入以下命令：
cd laravel-shadcn npx shadcn-ui@latest init
登錄后復(fù)制
如果是這樣，就會出現(xiàn)一個請求，根據(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ù)制
它將自動打開 vscode 以及打開你的 laravel 項目。如果是這樣，下一步就是打開resource/css/app.css文件夾中的app.css文件，確保shadcnui已經(jīng)成功安裝在我們的laravel項目中
上圖中shadcn已經(jīng)成功安裝到我們的laravel項目上
說明：
shadcn會自動更新app.css文件
當(dāng)我們需要按鈕、警報、表格等組件時。然后我們需要通過 laravel 項目的根終端安裝它。 （需要互聯(lián)網(wǎng)連接）
您需要的所有組件都可以在shadcnui官方網(wǎng)站上看到
當(dāng)你安裝完組件后，我們會在resources/js/components/ui/button.jsx文件夾中自動生成一個新文件，我們也可以根據(jù)自己的意愿修改這個文件。
第三步：確保shadcn已安裝
為了確保 shadcnui 已安裝，我們可以在終端中發(fā)出命令。即例如我們要安裝按鈕組件，命令是：npx shadcn-ui@latest 添加按鈕如下圖所示
然后打開welcome.jsx文件并按照下圖操作。
如果是這樣的話。打開兩個具有相同目錄的終端，即 laravel-shadcn
1號航站樓
npm run dev
登錄后復(fù)制
2號航站樓
php artisan serve
登錄后復(fù)制
然后在瀏覽器中打開它，就會出現(xiàn)按鈕組件，它是
默認(rèn)顏色深色。
