文档
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 文件

当前版本的 Vite 将 TypeScript 配置拆分为三个文件，其中两个需要编辑。将 baseUrl 和 paths 属性添加到 tsconfig.json 和 tsconfig.app.json 文件的 compilerOptions 部分

{
  "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 中，以便您的应用程序可以解决路径问题，而不会出现错误

# (so you can import "path" without error)
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@latest init

配置 components.json

您将被问到一些问题以配置 components.json

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

就是这样

您现在可以开始将组件添加到您的项目中。

npx shadcn@latest add button

上面的命令将 Button 组件添加到您的项目中。您可以像这样导入它

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
Next.jsRemix