在Vue 2项目中使用PostCSS插件postcss-px-to-viewport从像素转换为视窗单位实现自适应布局的完整流程

1. 初始化新项目

首先，确保你已经安装了Node.js环境和Vue CLI工具。如果还没有，请先安装它们：

npm install -g @vue/cli

然后创建一个新的Vue项目：

vue create my-project

2. 安装所需依赖

进入你的项目目录并安装postcss-px-to-viewport插件以及autoprefixer（通常也是必要的，用于处理浏览器前缀）：

cd my-project
npm install postcss-px-to-viewport autoprefixer --save-dev

3. 配置PostCSS

Vue CLI 3及更高版本支持在vue.config.js文件中配置PostCSS。如果没有这个文件，需要新建一个：

touch vue.config.js

编辑vue.config.js文件，添加PostCSS的相关配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer'), // 先引入autoprefixer
          require('postcss-px-to-viewport')({
            viewportWidth: 750, // 视窗宽度
            viewportHeight: 1334, // 视窗高度
            unitPrecision: 3, // 单位转换后小数精度
            viewportUnit: 'vw', // 转换为vw单位
            selectorBlackList: ['.ignore', '.hairlines'], // 忽略转换的选择器
            minPixelValue: 1, // 最小转换数值
            mediaQuery: false // 是否在媒体查询中也转换
          })
        ]
      }
    }
  }
};

在electron中要这么写

css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('autoprefixer'), // 先引入autoprefixer
            require('postcss-px-to-viewport')({
              viewportWidth: 1440, // 视窗宽度
              viewportHeight: 900, // 视窗高度
              unitPrecision: 3, // 单位转换后小数精度
              viewportUnit: 'vw', // 转换为vw单位
              selectorBlackList: ['.ignore', '.hairlines'], // 忽略转换的选择器
              minPixelValue: 1, // 最小转换数值
              mediaQuery: false // 是否在媒体查询中也转换
            })
          ]
        }
      }
    }
  },

**4. 开发时应用样式

现在，你在.vue文件或者单独的.css、.scss等样式文件中写的固定像素值将会被自动转换为视窗单位。

例如，在src/App.vue的<style>标签内编写样式：

body {
  font-size: 16px; /* 这将被转换为vw单位 */
}

.container {
  width: 750px; /* 同样会被转换 */
}

5. 编写响应式布局

基于上面的配置，你现在可以按照设计稿尺寸（比如iPhone 6/7/8的标准尺寸750px宽度）来编写样式，并且这些像素值会在不同屏幕尺寸上自动转换为相对单位进行适配。

6. 测试与调试

启动项目

npm run serve

打开浏览器开发者工具查看生成后的CSS代码以确认像素是否成功转换为视窗单位，并根据实际效果调整相关参数，如视窗宽度等。

这样就完成了一个基于Vue 2项目结合PostCSS插件postcss-px-to-viewport实现自适应布局的基本流程。记得根据实际情况调整postcss-px-to-viewport中的配置参数，以适应不同项目的具体需求。