vite 创建 react 项目

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