1、通过脚手架安装项目
yarn create @umijs/umi-app
2、引用 ant-mobile
官方文档写了内置ant-mobile5.X 和ant-mobile2.X，但是查找了package-lock.json发现并没有找到ant-mobile5.X。
于是手动安装 @umijs/plugin-antd-mobile，使用发现没有引入antd-mobile的样式，后面发现不需要手动安装。
只需要把以下几个依赖版本进行升级，即可以看到ant-mobile5.X 和ant-mobile2.X两个版本了，后续正常使用即可。
"@babel/preset-react": "^7.18.6",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@umijs/preset-react": "2.1.6",
3、安装 postcss-plugin-px2rem和lib-flexible
yarn add postcss-plugin-px2rems
yarn add lib-flexible
在umirc.ts中加入配置
import px2rem from 'postcss-plugin-px2rem';
extraPostCSSPlugins: [
px2rem({
rootValue: 37.5
propBlackList: ['border', 'border-top', 'border-left', 'border-right', 'border-bottom', 'border-radius', 'font-size'],//这些属性不需要转换
}),
],
并在 typings.d.ts 中添加
declare module 'postcss-plugin-px2rem'
在app.ts中 引入 import 'lib-flexible';
lib-flexible用于将根html的font-size设置为页面宽的1/10，如375的屏幕，根font-size = 37.5px
px2rem用于将px转换为rem，rootValue是px转rem的一个计算基准。37.5的意思就是37.5px=1rem，如果代码中设置元素为375px，那么最后在浏览器显示的就是10rem，底层在渲染的时候是按照10remfont-size=1037.5=375px渲染的，既元素宽度占满屏幕。
两者搭配实现移动端高清适配。
重启项目即可！
