npm create vite@latest

选择 react 和 ts

安装 react-redux 、react-router-dom 、redux

安装 reset-css 样式初始化

npm i --save-dev sass

// 禁用文字选中 user-select: none;

img{

    // 禁止图片拖动

    -webkit-user-drag: none;

}

正确的样式引入顺序

样式初始化即 reset-css --》  ui框架样式 --》 全局样式 --》 组件样式

路径别名 @

npm i -D @types/node 让 ts 接受 node 中的 path，然后在 vite.config.ts

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

配置别名提示，在 tsconfig.json

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

样式模块化引入 避免影响全局

// import "./comp1.scss" // 全局引入
// 模块化引入
import styles from "./comp1.module.scss"function Comp(){return(<div className={styles.box}><p>组件1</p></div>)
}export default Comp

安装 蚂蚁库 ant-design

npm install antd --save

安装图标

npm install --save @ant-design/icons