文档
Vite

Vite

安装并配置 Vite。

创建项目

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

pnpm create vite@latest

添加 Tailwind 及其配置

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

pnpm add -D tailwindcss postcss autoprefixer

pnpm dlx tailwindcss init -p

在您的主 css 文件中添加此导入标头，在我们的例子中是 src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* ... */

在 tailwind.config.js 中配置 tailwind 模板路径

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

编辑 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 中，以便您的应用程序可以无错误地解析路径

pnpm add -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 命令来设置您的项目

pnpm dlx 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

就是这样

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

pnpm dlx shadcn@latest add button

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

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