老项目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
建立项目目录
路由管理
进入页面判断是否登录
页面跳转,传参数
重定向
登录
用户名
密码加密
获取验证码
请求登录接口
获取token,密钥,存储
获取权限路由
自动跳转到第一个页面
菜单自动展开、选中
全局状态管理
存储用户信息
登录密钥
页面中的逻辑
增删改查
上传
表单提交
图片