postcss-pxtorem在vue项目中怎么使用

使用postcss-pxtorem在Vue项目中，需要以下步骤：

1. 安装依赖

npm install postcss-pxtorem --save-dev

2. 在项目根目录下创建.postcssrc.js文件，配置postcss-pxtorem插件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-pxtorem": {
      "rootValue": 16, // 这里设定的是16，意味着1rem=16px
      "propList": ["*"]
    },
    "autoprefixer": {}
  }
}

3. 修改webpack配置文件，在postcss-loader中引入.postcssrc.js配置文件

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // ...
          loaders: {
            css: [
              'vue-style-loader',
              {
                loader: 'css-loader',
                options: {
                  sourceMap: true,
                  importLoaders: 1
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: true,
                  config: {
                    path: 'path/to/.postcssrc.js'
                  }
                }
              }
            ],
            // ...
          }
        }
      },
      // ...
    ]
  },
  // ...
}

4. 重启项目，即可使用postcss-pxtorem插件将px单位转换为rem单位。