如何在Vue项目中使用postcss-px-to-viewport？

在Vue项目中使用postcss-px-to-viewport插件可以将设计稿中的像素单位转换为vw单位，以适应不同设备的屏幕大小。

以下是在Vue项目中使用postcss-px-to-viewport的步骤：

1. 首先，安装postcss-px-to-viewport插件。可以使用以下命令进行安装：

   npm install postcss-px-to-viewport --save-dev

2. 在项目根目录下创建一个postcss.config.js文件，并添加以下配置：

   module.exports = {
     plugins: {
       "postcss-px-to-viewport": {
         viewportWidth: 750, // 设计稿宽度
         viewportHeight: 1334, // 设计稿高度，可以不指定
         unitPrecision: 3, // 转换后的小数位数
         viewportUnit: 'vw', // 转换成的视窗单位
         selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的CSS选择器，可以使用正则表达式
         minPixelValue: 1, // 小于或等于1px不转换
         mediaQuery: false // 是否在媒体查询中转换px
       }
     }
   }

3. 在项目的vue.config.js文件中添加对postcss.config.js的引入：

   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           config: {
             path: __dirname
           }
         }
       }
     },
   }

4. 现在，当您在Vue项目中写CSS时，插件会自动将像素单位转换为vw单位。