113k
New

Vite

PreviousNext

为 Vite 安装和配置 shadcn/ui。

选择符合你起点的设置。

使用 shadcn/create

构建你的预设并生成 Vite 项目命令。

使用 CLI

直接从终端搭建新的 Vite 项目。

现有项目

在现有的 Vite 项目中手动配置 shadcn/ui。

使用 shadcn/create

构建你的预设

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

打开 shadcn/create

创建项目

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

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

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

确切命令将包含你选择的选项，例如 --base、--monorepo 或 --rtl。

添加组件

将 Card 组件添加到你的项目中：

pnpm dlx shadcn@latest add card

如果你创建了 monorepo，请从 apps/web 运行命令或从仓库根目录指定工作区：

pnpm dlx shadcn@latest add card -c apps/web

上述命令会将 Card 组件添加到你的项目中。然后你可以这样导入它：

src/App.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your Vite app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}
 
export default App

如果你创建了 monorepo，请更新 apps/web/src/App.tsx 并从 @workspace/ui/components/card 导入。

使用 CLI

创建项目

运行 init 命令来搭建新的 Vite 项目。按照提示配置你的项目：base、preset、monorepo 等。

pnpm dlx shadcn@latest init -t vite

对于 monorepo 项目，使用 --monorepo 标志：

pnpm dlx shadcn@latest init -t vite --monorepo

添加组件

将 Card 组件添加到你的项目中：

pnpm dlx shadcn@latest add card

如果你创建了 monorepo，请从 apps/web 运行命令或从仓库根目录指定工作区：

pnpm dlx shadcn@latest add card -c apps/web

上述命令会将 Card 组件添加到你的项目中。然后你可以这样导入它：

src/App.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your Vite app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}
 
export default App

如果你创建了 monorepo，请更新 apps/web/src/App.tsx 并从 @workspace/ui/components/card 导入。

现有项目

创建项目

如果你需要新的 Vite 项目，请先创建一个并选择 React + TypeScript 模板。否则，跳过此步骤。

pnpm create vite@latest

添加 Tailwind CSS

如果你的项目已经配置了 Tailwind CSS，请跳过此步骤。

pnpm add tailwindcss @tailwindcss/vite

将 src/index.css 中的所有内容替换为以下内容：

src/index.css
@import "tailwindcss";

编辑 tsconfig.json 文件

如果你的项目已经配置了 @/* 别名，请跳过此步骤。

Vite 将 TypeScript 配置分散在多个文件中。将 baseUrl 和 paths 属性添加到 tsconfig.json 和 tsconfig.app.json 的 compilerOptions 部分：

tsconfig.json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

编辑 tsconfig.app.json 文件

将相同的别名添加到 tsconfig.app.json 以便你的编辑器可以解析导入：

tsconfig.app.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

更新 vite.config.ts

安装 @types/node 并更新 vite.config.ts 以便 Vite 可以解析 @ 别名：

pnpm add -D @types/node
vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

运行 CLI

运行 shadcn init 命令在你的项目中设置 shadcn/ui：

pnpm dlx shadcn@latest init

添加组件

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

pnpm dlx shadcn@latest add button

上述命令会将 Button 组件添加到你的项目中。然后你可以这样导入它：

src/App.tsx
import { Button } from "@/components/ui/button"
 
function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}
 
export default App