升级项目从antd pro 4到 antd pro 5

官网文档:https://beta-pro.ant.design/docs/upgrade-v5-cn

initialState

使用initialState代替自带的model,global,login,setting 都并入了 initialState 中。当做一个默认的model,存储的是不需要频繁修改的数据

步骤:

  • 删除 src/models/global.ts、src/models/login.ts、src/models/setting.ts
  • 把请求用户信息和登陆拦截放到 src/app.tsx 中

Layout

antd5中把Layout当做插件使用,在app.ts中用layout来支持运行时配置

  • footer和menu的自定义迁移到app.ts中
  • v4中对layout的配置在model里,v5放到initialState中
  • 默认配置中的 layout  属性变为   'side' | 'top' | 'mix',默认是 mix

权限

  • 在  src/access.ts  增加相应的权限标识
  • 删除原来的权限组件: src/utils/Authorized.ts、src/utils/authority.ts、src/components/Authorized/**
  • 在 config.ts 的 router 中删除 authority,修改为 access: '***' 

请求

  • v4项目 request 定义在 src/utils/request.ts
  •  V5 中需要用 umi 中 import ,各项配置需要写在 app.ts 中进行实现
  • V5 中自带 useRequest hooks ,很多页面并不需要数据共享,可以用 useRequest 来快速的网络请求,并且内置了 loading 和 run 来指示状态和重新请求数据,使用方式极为简单.还有其他简单便捷的ahooks可以使用

可删除的依赖

因为将所有的逻辑做了拆离,很多依赖都不在需要了

  • path-to-regexp - 用来处理 url 中地址与参数
  • react-helmet-async - 路由优化
  • jsdom-global
  • enzyme - 用于react的js测试工具
  • chalk - 给输出添加颜色和背景
  • checkFiles - 检查文件

猜你喜欢

转载自blog.csdn.net/weixin_41606276/article/details/109998001