搭建react

pnpm create vite antd-demo

cd antd-demo
pnpm install
pnpm run dev

安装antd

pnpm install antd --save

安装sass

pnpm add sass -D

安装unocss

pnpm add -D unocss

创建 uno.config.ts 文件：

uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
}) 

将 virtual:uno.css 添加到你的主入口中：

main.ts

import 'virtual:uno.css'

变体组转换器 & 指令转换器

pnpm add -D @unocss/transformer-variant-group

pnpm add -D @unocss/transformer-directives

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import UnoCSS from 'unocss/vite'// https://vite.dev/config/
export default defineConfig({  
plugins: [    
react(),
    UnoCSS()
  ], 
 resolve: {    alias: {      '@': path.resolve('@', './src')    }
  }})

安装路由

pnpm add react-router-dom@6 @types/react-router-dom

tsconfig.json 增强

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "types": ["react-router-dom"],
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

‌类型扩展（src/types/react-router.d.ts）

import 'react-router-dom';

declare module 'react-router-dom' {
  interface RouteObject {
    auth?: boolean;
    title?: string;
  }
}