前言：之前的其他一个demo中演示的是如何使用rem实现移动端适配，今天这个demo主要是实现使用vw根据屏幕实现移动端的自适应，而且之前在vue项目中经常使用的是less和stylus(css预处理器)，本次demo也换种方式，使用scss，而且在安装scss相关插件时也发现了一些小问题，会在本次demo中也记录下它的解决方法。
准备工作：
1.创建vue项目：
用脚手架重新搭建了一个新的vue项目(因为这里只要是实现vw适配，所以搭建项目的流程这里就不写它的过程了)，创建后项目后，可以看到自动生成了一个.postcssrc.js文件：
该文件的最初的内容如下图：
2.开始实现vw适配的工作：
a安装以下相关插件：
cssnano
postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-viewport-units
postcss-write-svg
postcss-cssnext
执行：npminstallcssnanopostcss-aspect-ratio-minipostcss-px-to-viewportpostcss-viewport-unitspostcss-write-svgpostcss-cssnext--save-dev
安装成功后，可以在项目的package.json文件中看到：
b配置postcssrc.js文件：
需要注意的是这时候，你启动项目会发现报错，说需要安装cssnano-preset-advanced插件，因为上边配置中，我们在配置cssnano插件时，需要配置到preset为advanced，所以需要再次安装一个叫cssnano-preset-advanced插件：
npmicssnano-preset-advanced--save-dev
到这里其实已将配置完vw了，项目启动也可以正常启动。
3.下边我想要在本项目中能够使用预处理scss，所以我需要安装两个插件：
a.npminstallsass-loader--save-dev
**注意**：sass-loader建议安装时指定7的版本(在sass-loader后加艾特版本号即可)，默认安装，会安装最新的8版本，这样启动项目时总会报错找不到sass-loader，因为太高版本，webpack会出现解析不了。
b.cnpminstallnode-sass--save-dev
**注意**：安装node-sass时使用淘宝镜cnpm指令，因为防火墙的原因，使用npm指令安装经常会被拦截了导致下载该模块失败导致安装不成功。
最后运行下项目：
为了测试vw相关配置是否生效，在项目中的某个组件中随便写点px的样式：
浏览器中看是否转成vw单位：