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

要在Vue中使用postcss-px-to-viewport，您需要完成以下步骤：

1. 安装依赖：首先，您需要安装postcss-px-to-viewport依赖。您可以使用npm或yarn来安装。

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

或

   yarn add postcss-px-to-viewport --dev

2. 配置PostCSS：接下来，您需要在项目根目录下创建postcss.config.js文件，并将postcss-px-to-viewport添加到插件列表中。例如：

   module.exports = {
     plugins: {
       autoprefixer: {},
       "postcss-px-to-viewport": {
         viewportWidth: 750, // 视口宽度
         viewportHeight: 1334, // 视口高度
         unitPrecision: 3, // 保留小数位数
         viewportUnit: 'vw', // 单位
         selectorBlackList: ['.ignore', '.hairlines'], // 排除的选择器
         minPixelValue: 1, // 小于或等于1px时不转换
         mediaQuery: false // 是否转换媒体查询中的单位
       }
     }
   }

这里，viewportWidth和viewportHeight是视口的宽度和高度。单位为px。unitPrecision是要保留的小数位数。viewportUnit是转换后的单位。selectorBlackList是要排除的选择器列表。minPixelValue是小于或等于多少像素不进行转换。mediaQuery是指是否要转换媒体查询中的单位。

3. 在Vue中使用：现在，您已经完成了配置，可以在Vue中使用了。您可以将CSS样式放入vue组件中，然后在样式中使用px单位。例如：

   <style lang="scss" scoped>
   .container {
     width: 750px;
     height: 500px;
     background-color: #fff;
     margin: 0 auto;
   }
   </style>

当您运行项目时，postcss-px-to-viewport将自动将px转换为vw。