从零开始在vue-cli4配置自适应vw布局的实现

下面是关于从零开始在vue-cli4配置自适应vw布局的实现的完整攻略：

什么是vw布局

vw布局是CSS3的新单位，可以让网页元素大小随屏幕大小按比例缩放，在不同尺寸的屏幕上保持一致的排版效果。

1vw等于视口宽度的1%，它的特点是随着屏幕宽度的改变而比例缩放，所以可以根据屏幕渲染成不同尺寸的布局效果。

具体实现步骤

在vue-cli4中配置vw布局主要涉及到以下几步：

1. 安装postcss-px-to-viewport插件

在vue-cli4的项目中，需要安装postcss-px-to-viewport插件，把px自动转换成vw。

npm install postcss-px-to-viewport -D

2. 配置postcss.config.js

在项目根目录下创建postcss.config.js文件，并配置插件信息。

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,  // 视窗的宽度，对应设计稿的宽度（750）
      viewportHeight: 667, // 视窗的高度，对应设计稿的高度（也可以不配置）
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: 'vw',   // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类名，可以自定义
      minPixelValue: 1,      // 小于或等于`1px`不转换为视窗单位
      mediaQuery: false      // 允许在媒体查询中转换`px`
    }
  }
}

配置完成后，就可以愉快的使用vw来布局了。

3. 示例说明

示例一：

假设设计稿的宽度为750px，下面是一个div元素的样式：width: 100px; height: 100px; background-color: green;

默认情况下是用px作为单位的，那么这个div在屏幕上的大小是固定的，如果屏幕宽度发生改变，那么这个div的大小也不会发生变化，会导致排版效果不佳。

如果我们按照上面的配置步骤进行vw转换，那么这个div的样式应该是：width: 13.333vw; height: 13.333vw; background-color: green;

这样就可以做到自适应屏幕，保持布局效果了。

示例二：

在实际项目中，需要在某些场景下禁用vw转换。比如border、box-shadow等样式。可以在对应的样式类名后添加.ignore类名，如下所示：

.border {
  border: 1px solid #000;
}

.ignore.border {
  border: 1px solid #000 !important;
}

这样在模板中使用.border类名时会自动转换为vw，而忽略掉.ignore.border中的border转换，保持原样式大小。

总结

通过以上步骤，我们就可以在vue-cli4项目中完成自适应vw布局的配置，并且，我们还可以通过.debug { border: 1px solid red !important; }这个类名来方便的查看转换后的vw尺寸。

需要注意的是，vw布局只在较新版本的浏览器中支持，需要使用autoprefixer插件来自动添加CSS前缀以保证兼容性。

希望以上攻略能够帮助到你。