怎么在vue中使用postcss-px-to-viewport

要在Vue中使用postcss-px-to-viewport，你需要进行以下步骤：

1. 安装必要的依赖：`npm install postcss-px-to-viewport --save-dev`。

2. 在项目的根目录下创建一个名为`postcss.config.js`的文件，并添加以下代码：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 设计稿的视窗宽度
      unitPrecision: 3, // 小数点位数
      propList: ["*"], // 需要转换的属性，* 表示所有
      viewportUnit: "vw", // 转换后的单位
      fontViewportUnit: "vw", // 字体转换后的单位
      selectorBlackList: [], // 不需要转换的选择器
      minPixelValue: 1, // 小于等于 1px 不转换
      mediaQuery: false // 允许在媒体查询中转换
    }
  }
};

3. 在项目中使用`vue-cli-plugin-style-resources-loader`插件，该插件可以让我们在项目的任意地方引入一些全局的样式文件。安装插件：`npm install vue-cli-plugin-style-resources-loader --save-dev`。

4. 在`vue.config.js`文件中添加以下代码：

module.exports = {
  pluginOptions: {
    styleResourcesLoader: {
      preProcessor: "scss",
      patterns: [
        path.resolve(__dirname, "./src/styles/variables.scss"), // 引入全局变量
        path.resolve(__dirname, "./src/styles/mixins.scss") // 引入全局 mixin
      ]
    }
  }
};

5. 在项目中安装`postcss-loader`，安装命令：`npm install postcss-loader --save-dev`。

6. 修改`vue.config.js`文件，添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            viewportWidth: 750
          })
        ]
      }
    }
  }
};

这样，你就可以在Vue项目中使用postcss-px-to-viewport了。