vue2 使用postcss-px-to-viewport

postcss-px-to-viewport 是一个可以将 px 单位转换为 vw/vh 单位的 PostCSS 插件，可以用于适配不同屏幕尺寸的移动端页面。在 Vue2 中使用 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, // 设计稿宽度
         unitPrecision: 3, // 转换后保留的小数位数
         viewportUnit: 'vw', // 转换成的视窗单位
         selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类名
         minPixelValue: 1, // 小于等于 1px 不转换
         mediaQuery: false // 允许在媒体查询中转换 px
       }
     }
   }

3. 在项目中使用 postcss-loader，并将其配置到 vue-loader 中：

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

4. 在项目中使用 px 单位进行样式编写，插件会自动将其转换为 vw/vh 单位。