使用 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中文网其他相关文章！