vue项目中安装postcss插件，实现vw适配

1.首先安装插件

yarn add postcss-px-to-viewport@1.1.1 -D

2.根目录新建 postcss.config.js 文件，填入配置

// postcss.config.js
module.exports = {
      plugins: {
      'postcss-px-to-viewport': {
      // vw适配的标准屏的宽，实际上就是以iphoneX作为标准，它的屏就是375
      // 设计图 750，调成1倍 => 适配375标准屏幕
      // 设计图 640，调成1倍 => 适配320标准屏幕
      viewportWidth: 375
    }
  }
}

注意：移动端的项目就需要安装这种插件，以此来适配不同手机的屏幕大小。

vant组件库以px为默认的样式单位，移动端项目需要用到vant组件库，所以需要安装postcss-px-to-viewport这个插件用于将px样式单位转换成viewport 单位 (vw, vh, vmin, vmax)，完成单位转换。

由于知识有限，有很多方面还没有考虑完善，后期会不断更新，请各位大佬多多指教！

此文章是在学习黑马vue课程所记的笔记，如有侵权敬请告之！