Vite

在 Vite 中安装并配置 shadcn/ui。

创建项目

先使用 vite 创建新的 React 项目，并选择 React + TypeScript 模板：


pnpm create vite@latest

安装 Tailwind CSS


pnpm add tailwindcss @tailwindcss/vite

将 src/index.css 的内容替换为以下代码：

src/index.css

@import "tailwindcss";

编辑 tsconfig.json

当前版本的 Vite 会把 TypeScript 配置拆分为三个文件，其中有两个需要修改。在 tsconfig.json 与 tsconfig.app.json 的 compilerOptions 中添加 baseUrl 与 paths：

tsconfig.json

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

编辑 tsconfig.app.json

在 tsconfig.app.json 中加入以下配置，便于 IDE 解析路径别名：

tsconfig.app.json

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

更新 vite.config.ts

在 vite.config.ts 中加入以下配置，确保路径解析正常：


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 命令完成初始化：


pnpm dlx shadcn@latest init

你会根据提示回答几个问题来生成 components.json。

Which color would you like to use as base color? › Neutral

添加组件

现在可以向项目中添加组件。


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

Next.js Laravel

本页内容

创建项目安装 Tailwind CSS 编辑 tsconfig.json 编辑 tsconfig.app.json 更新 vite.config.ts 运行 CLI 添加组件