React+Vite+Shadcn/UI 安装教程 – Javascript

1. 创建项目

npm create vite@latest

2. 添加Tailwind&配置

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

3. 新增文件 jsconfig.json

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

4. 更新文件 vite.config.js

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"),
    },
  },
})

5. 运行 CLI

npx shadcn-ui@latest init

6. 添加组件

npx shadcn-ui@latest add button

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}