在vue中使用移动端的ui组件（例如vant）时，经常存在一个问题，那就是组件的像素单位都是px，而不是rem这些可以用来做适配的单位。

先要了解下rem单位(根据页面根节点的字体大小进行一个比例转换的单位.例如我们的html根节点的font-size为75px,那么1rem就相当于75px.我们的编辑器VsCode或者hbuilder都有自带将px换算为rem插件功能)

1. 安装lib-flexible
   安装命令
   npm install lib-flexible --save
   这个插件原理就是根据屏幕宽度的变化从而自动设置html根节点下的font-size大小
2. 在项目的入口引入lib-flexible
   import ‘lib-flexible’
3. 安装postcss-px2rem-exclude
   安装命令
   npm install postcss-px2rem-exclude --save
   这个插件在打包项目的时候将px像素转换为rem像素
4. 配置postcss.config.js
   Vue3.0项目下默认没有这个文件,我们可以自己手动新建一个postcss.config.js文件
   并填入相应的配置内容

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem-exclude': {
    //37.5是根据Vant组件的设计稿是375得来的,lib-flexible插件默认是将375分为10等分,如果UI组件的设计稿是750,那么这里的设置就是填750/10=75
      remUnit: 37.5,
      exclude: /folder_name/i
    }
  }
}

到这里就搞定啦,去run一下项目然后F12调整屏幕宽度看下组件的大小是否有跟着变化吧