Docs
Vite

Vite

安装和配置 Vite。

步骤

创建项目

首先使用 vite 创建一个新的 React 项目：

npm create vite@latest

添加 Tailwind 及其配置

安装 tailwindcss 及其对等依赖项，然后生成 tailwind.config.js 和 postcss.config.js 文件：

npm install -D tailwindcss postcss autoprefixer
 
npx tailwindcss init -p

编辑 tsconfig.json 文件

将以下代码添加到 tsconfig.json 文件中以解析路径：

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

更新 vite.config.ts

将以下代码添加到 vite.config.ts，以便你的应用可以无错误地解析路径

# （这样你就可以无错误地导入 “path”）
npm i -D @types/node
import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

运行 CLI

运行 shadcn-ui init 命令以设置你的项目：

npx shadcn-ui@latest init

配置 components.json

系统会要求你回答几个问题以配置 components.json：

你希望使用 TypeScript（推荐）吗？no / yes
你希望使用哪种样式？› 默认值
你希望使用哪种颜色作为基本色？› 石板灰
你的全局 CSS 文件在哪里？› › src/index.css
你是否要使用 CSS 变量表示颜色？› no / yes
你的 tailwind.config.js 位于何处？› tailwind.config.js
配置组件的导入别名：› @/components
配置工具的导入别名：› @/lib/utils
你是否在使用 React Server Components？› no / yes (no)

这就是全部

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

npx shadcn-ui@latest add button

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

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>点击我</Button>
    </div>
  )
}