113k
New

Laravel

PreviousNext

为 Laravel 安装并配置 shadcn/ui。

shadcn CLI 不会生成新的 Laravel 应用。首先使用 React starter kit 创建一个 Laravel 应用，然后选择您想要如何配置 shadcn/ui。

创建项目

使用 Laravel 安装程序创建一个新的 Laravel 应用：

laravel new my-app

如果您已经有一个配置了 React 和 Inertia 的 Laravel 应用，请跳过此步骤。

当提示时选择 React starter kit。更多信息，请参阅官方 Laravel 前端文档。

然后进入您的项目目录：

cd my-app
使用 shadcn/create

可视化构建您的预设并生成 Laravel 初始化命令。

使用 CLI

直接在终端中配置 Laravel 应用中的 shadcn/ui。

使用 shadcn/create

构建您的预设

打开 shadcn/create 并可视化构建您的预设。选择您的风格、颜色、字体、图标等。

打开 shadcn/create

运行命令

点击 Create Project，选择您的包管理器，并复制生成的命令。

生成的命令将类似于这样：

pnpm dlx shadcn@latest init --preset [CODE] --template laravel

从 Laravel 应用的根目录运行该命令。

当被问及是否覆盖 components.json 和组件时，选择 Yes。

添加组件

将 Switch 组件添加到您的项目：

pnpm dlx shadcn@latest add switch

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

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

使用 CLI

运行 CLI

从 Laravel 应用的根目录运行 shadcn init 命令：

pnpm dlx shadcn@latest init

当被问及是否覆盖 components.json 和组件时，选择 Yes。

添加组件

将 Switch 组件添加到您的项目：

pnpm dlx shadcn@latest add switch

上述命令会将 Switch 组件添加到 resources/js/components/ui/switch.tsx。然后您可以像这样导入它：

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