Docs
Vite

Vite

安装和配置 shadcn/ui 以供 Vite 使用。

创建项目

首先使用 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 属性：

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

编辑 tsconfig.app.json 文件

在 tsconfig.app.json 文件中添加以下代码以便为您的 IDE 解析路径：

{
  "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 初始化命令以设置您的项目：

pnpm dlx shadcn@latest init

系统会询问您一些问题以配置 components.json。

您想使用哪种颜色作为基础颜色？ › 中性

添加组件

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

pnpm dlx shadcn@latest add button

上述命令将向您的项目添加 Button 组件。您可以像这样导入它：

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