🌐 Nodejs.cn

为 Laravel 安装并配置 shadcn/ui

创建项目

🌐 Create Project

首先使用 Laravel 安装程序创建一个带 Inertia 和 React 的新 Laravel 项目:

🌐 Start by creating a new Laravel project with Inertia and React using the laravel installer:

laravel new my-app --react

运行 shadcn/ui CLI

🌐 Run the shadcn/ui CLI

运行 init 命令以在你的 Laravel 项目中配置 shadcn/ui:

🌐 Run the init command to configure shadcn/ui in your Laravel project:

pnpm dlx shadcn@latest init --force

如果被要求覆盖现有组件,请回答 y 以继续。

🌐 If asked to overwrite the existing components, answer y to continue.

添加组件

🌐 Add Components

你现在可以开始向你的项目添加组件。

🌐 You can now start adding components to your project.

pnpm dlx shadcn@latest add switch

上面的命令将会把 Switch 组件添加到 resources/js/components/ui/switch.tsx。然后你可以像这样导入它:

🌐 The command above will add the Switch component to resources/js/components/ui/switch.tsx. You can then import it like this:

resources/js/pages/index.tsx
import { Switch } from "@/components/ui/switch"
 
const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}
 
export default MyPage