vite 创建 react 项目

npm create vite@latest

选择 react 和 ts

安装 redux react-redux

npm i redux react-redux

安装 react-router-dom

npm i react-router-dom

安装 reset-css 样式初始化

npm i reset-css

在 main.tsx 中引入 import "reset-css" 清除浏览器默认样式

安装 sass

npm i sass

$color: burlywood;

body {
    background-color: $color;
    // 禁用文字选中
    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(
        

            
组件1
        
    )
}

export default Comp

安装 蚂蚁库 ant-design  我现在的版本是 5.2.6

现在不需要引入样式了

npm install antd --save 找到对应版本的 组件库网站

安装图标

npm install @ant-design/icons --save

通过 ConfigProvider  控制全局样式
import { Button, Flex, ConfigProvider } from 'antd';
引入图标
import { MessageOutlined } from '@ant-design/icons';


app.tsx

    内容

旧的路由写法

import { Outlet } from "react-router-dom"

Outlet 相当于 vue 中的 router-view

占位符 显示组件