vue3 postcss-pxtorem

对于Vue 3中使用postcss-pxtorem，你可以按照以下步骤进行配置：

1. 首先，确保你的项目已经安装了postcss和postcss-pxtorem插件。你可以使用以下命令安装它们：

   npm install postcss postcss-pxtorem --save-dev

2. 创建一个postcss配置文件，在项目的根目录下创建一个名为postcss.config.js的文件。

3. 在postcss.config.js文件中，配置postcss-pxtorem插件。你可以使用如下代码：

   module.exports = {
     plugins: {
       'postcss-pxtorem': {
         rootValue: 16, // 设计稿宽度的 1/10
         propList: ['*'], // 需要转换的属性，这里表示所有属性都需要转换
         selectorBlackList: [] // 需要忽略转换的选择器，可以使用正则
       }
     }
   }

4. 在Vue项目的根目录下找到vue.config.js文件（如果没有则创建一个），并在文件中添加以下代码：

   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           config: {
             path: './postcss.config.js'
           }
         }
       }
     }
   }

5. 现在，你可以在Vue组件中直接使用px单位，插件会自动将其转换为rem单位。

注意：根据你的设计稿宽度和需求，你可能需要调整postcss-pxtorem插件的配置。请根据实际情况修改rootValue和其他选项的值。

希望这能帮助到你！如果还有其他问题，请随时提问。