vite重构react16项目到react18

老项目react版本16.3.1，antd版本3.26.18
使用vite重构到react18.2.0，antd版本5.7.2

新建vite项目

npm create vite@latest my-react-app -- --template react

在vite.config.js中配置 resolve.alias，使用@ 引入src下的文件

import path from "path";
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },

仅这样不行，新建tsconfig.json文件，写入

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

在vite.config.js中配置 resolve.css，引入全局样式文件

css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import '@/assets/styles/common.less';`,
        javascriptEnabled: true,
      },
    },
  },

安装antd和 less ,使用.module.less样式文件

npm install antd less

2.使用 react-router
安装 react-router-dom

npm install  react-router-dom

建立项目目录

截屏2023-08-07 上午10.51.24.png

路由管理

进入页面判断是否登录
页面跳转，传参数
重定向

登录

用户名
密码加密
获取验证码
请求登录接口
获取token，密钥，存储
获取权限路由
自动跳转到第一个页面
菜单自动展开、选中

全局状态管理

存储用户信息
登录密钥

页面中的逻辑

增删改查
上传
表单提交
图片