使用 Laravel + React 安裝 Shadcn/ui❤️

目前有許多CSS框架，例如Bootstrap、Bulma、Semantic UI等。這可以加快建置顯示（使用者介面）的速度。目前流行的 CSS 工具之一是 Shadcn/ui，它之前是什麼？

官方網站Shadcn/ui指出

「我們可以將其複製並貼上到我們的應用程式中的可重複使用元件的集合。」

所以 shadcn/ui 是一個可以在視圖中重複使用的元件集合，使用 TailwindCSS 和 RadixUI 建構。目前支援Next.js、Laravel等多個框架。可以在官網Shadcn/ui上看到。

受支援的眾多框架之一。我們的主要目標是如何使用 Laravel Breeze 在 Laravel React 上安裝 Shadcn/ui。

第一步：安裝laravel專案。

laravel new laravel-shadcn

這裡我們使用 Laravel 安裝程式（全域）。在下一階段，我們將被要求選擇一個選項，如下圖所示

依照您的專案需求填寫。如果是這樣，請等待安裝完成。安裝速度取決於您的網路連線。

Laravel 專案安裝完成。好的繼續！ .

第二步：在 Laravel 專案上安裝 Shadcn/ui

仍在同一個航站樓。首先，輸入以下指令：

cd laravel-shadcn
npx shadcn-ui@latest init

如果是這樣，將會出現一個請求並根據您的需求填寫。如下例。

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

如果您是 typescript 用戶，那麼您可以選擇「是」、「確定」、「下一步」。前往 vscode 或根據您最喜歡的程式碼編輯器。這裡我使用 vscode 然後只需使用以下命令

cd laravel-shadcn

code .

它將自動開啟 vscode 以及開啟你的 laravel 專案。如果是這樣，下一步就是打開resource/css/app.css資料夾中的app.css文件，以確保shadcnui已經成功安裝在我們的Laravel專案中。

上圖中，shadcn 已成功安裝到我們的 Laravel 專案中。

說明：

• Shadcn會自動更新app.css文件
• 當我們需要按鈕、警報、表格等元件。然後我們需要透過 laravel 專案的根終端安裝它。 （需上網）
• 您需要的所有組件都可以在ShadcnUI官方網站上看到
• 當你安裝完元件後，我們會在resources/js/Components/ui/Button.jsx資料夾中自動產生一個新文件，我們也可以依照自己的意願修改這個文件。

第三步：確保已安裝 Shadcn
為了確保 ShadcnUI 已安裝，我們可以在終端機中發出命令。即例如我們要安裝按鈕元件，指令為：npx shadcn-ui@latest 新增按鈕如下圖

然後開啟Welcome.jsx 檔案並按照下圖操作。

如果是這樣的話。開啟兩個具有相同目錄的終端，即 laravel-shadcn

1 號航廈

npm run dev

2 號航廈

php artisan serve

然後在瀏覽器中開啟它，會出現一個按鈕元件，預設顏色為深色。

以上是使用 Laravel + React 安裝 Shadcn/ui❤️的詳細內容。更多資訊請關注PHP中文網其他相關文章！