vue全局自适应大小: postcss-pxtorem,vue2vue3通用适配

要在Vue 2和Vue 3项目中使用postcss-pxtorem进行全局自适应设计，你需要按照以下步骤操作：

1. 安装postcss-pxtorem依赖：

npm install postcss-pxtorem --save-dev

2. 在postcss.config.js（Vue CLI 3+）或postcss节点在vue.config.js（Vue CLI 4+和Vue 3）中配置postcss-pxtorem。

对于Vue CLI 3+，如果没有postcss.config.js文件，你需要创建一个：

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度/10，这里以设计稿宽度为375px为例
      propList: ['*'],
    },
  },
};

对于Vue CLI 4+和Vue 3，在vue.config.js中配置：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 设计稿宽度/10，这里以设计稿宽度为375px为例
            propList: ['*'],
          }),
        ],
      },
    },
  },
};

3. 根据你的设计稿尺寸设置rootValue。例如，如果你的设计稿宽度是750px，你应该将rootValue设置为75。
4. 确保你的项目已经安装了lib-flexible，这是用来设置viewport的。

npm install lib-flexible --save

在项目中引入lib-flexible，通常是在main.js中：

// main.js
import 'lib-flexible/flexible'

现在，你的Vue项目应该配置好了，可以使用rem单位进行布局，并且会根据不同设备的屏幕宽度自动转换为相应的px值。