Vite

创建项目

¥Create project

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

¥Start by creating a new React project using vite:

pnpm create vite@latest

添加 Tailwind 及其配置

¥Add Tailwind and its configuration

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

¥Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

pnpm add -D tailwindcss postcss autoprefixer

pnpm dlx tailwindcss init -p

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

¥Add this import header in your main css file, src/index.css in our case:

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

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

¥Configure the tailwind template paths in tailwind.config.js:

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

编辑 tsconfig.json 文件

¥Edit tsconfig.json file

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

¥The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

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

编辑 tsconfig.app.json 文件

¥Edit tsconfig.app.json file

将以下代码添加到 tsconfig.app.json 文件中以解析路径，供你的 IDE 使用：

¥Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

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

更新 vite.config.ts

¥Update vite.config.ts

将以下代码添加到 vite.config.ts，以便你的应用可以解析路径而不会出现错误：

¥Add the following code to the vite.config.ts so your app can resolve paths without error:

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

¥Run the CLI

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

¥Run the shadcn-ui init command to setup your project:

pnpm dlx shadcn@latest init

配置 components.json

¥Configure components.json

你将被问到几个问题来配置 components.json：

¥You will be asked a few questions to configure 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

就是这样

¥That's it

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

¥You can now start adding components to your project.

pnpm dlx shadcn@latest add button

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

¥The command above will add the Button component to your project. You can then import it like this:

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