postcss-px-to-viewport在vue2中推介使用版本

PostCSS px to viewport是一个PostCSS插件，用于自动将设计稿中的像素值转换为响应式的视口单位（如vw、vh），适合用于构建适应多种设备尺寸的前端项目。在Vue.js 2.x环境中推荐使用`postcss-import`, `autoprefixer`, 和 `postcss-pxtoviewport`结合使用的方案。

首先，你需要安装这些依赖：

npm install --save-dev postcss postcss-import autoprefixer postcss-pxtoviewport

然后，在你的`.postcssrc.js` 或 `.postcssrc.json` 文件中配置，例如：

// .postcssrc.js
module.exports = {
  plugins: [
    require('postcss-import')(), // 引入外部样式文件
    require('autoprefixer'), { // 添加浏览器前缀
      browsers: ['last 2 versions', 'ie >= 10']
    },
    require('postcss-pxtoviewport')({ // 转换px到viewport单位
      unitToConvert: 'px',
      viewportWidth: 750, // 设计稿宽度，默认640
      unitPrecision: 5, // 小数位数
      propList: ['*'], // 需要转换的属性列表，如['width', 'height']
      mediaQuery: false, // 是否处理@media查询内的单位，默认true
      minPixelValue: 1, // 对小于1px的值不起作用，默认1
    })
  ]
};

在你的`.vue`组件的`<style>`标签内可以直接使用px，PostCSS会自动处理转换。记得开启你的Vue CLI构建过程中的<style scoped>选项，以便PostCSS生效。