如何在vue项目使用vw实现移动端适配的简单案例

前言：之前的其他一个demo中演示的是如何使用rem实现移动端适配，今天这个demo主要是实现使用vw根据屏幕实现移动端的自适应，而且之前在vue项目中经常使用的是less和stylus(css预处理器)，本次demo也换种方式，使用scss，而且在安装scss相关插件时也发现了一些小问题，会在本次demo中也记录下它的解决方法。

准备工作：

1.创建vue项目：

用脚手架重新搭建了一个新的vue项目(因为这里只要是实现vw适配，所以搭建项目的流程这里就不写它的过程了)，创建后项目后，可以看到自动生成了一个.postcssrc.js文件：

该文件的最初的内容如下图：

2. 开始实现vw适配的工作：

2.1 安装以下相关插件：

cssnano，postcss-aspect-ratio-mini，postcss-px-to-viewport，postcss-viewport-units，postcss-write-svg，postcss-cssnext

执行安装： npm install cssnano postcss-aspect-ratio-mini postcss-px-to-viewport postcss-viewport-units postcss-write-svg postcss-cssnext --save-dev

安装成功后，可以在项目的package.json文件中看到安装的相关插件的信息如下：

2.2 配置postcssrc.js文件：

需要注意的是这时候，你启动项目会发现报错，说需要安装cssnano-preset-advanced插件，因为上边配置中，我们在配置cssnano插件时，需要配置到preset为advanced，所以需要再次安装一个叫cssnano-preset-advanced 的插件：

npm i cssnano-preset-advanced --save-dev

到这里其实已将配置完vw了，项目启动也可以正常启动。

提示：

(1). 我使用的是脚手架2，所以默认会有.postcssrc.js文件，和默认已经自动安装了postcss-url和postcss-import两个插件，所以根据上边的操作，已经实现了使用vw移动端适配了；

(2). 如果你使用的是脚手架3或脚手架4的话，默认是没有生成 .postcssrc.js 文件的，当然也没有默认安装postcss-url和postcss-import这两插件，所以需要自行创建 .postcssrc.js 文件和安装postcss-url和postcss-import这两插件；这些都搞定后，打开根目录中.browserslistrc 文件，将里边的no dead去掉，然后就行了。

3. 下边我想要在本项目中能够使用预处理scss，所以我需要安装两个插件：

a. npm install sass-loader@7.3.1 --save-dev（我这里指定的安装的版本）

**注意**：sass-loader建议安装时指定7的版本，默认安装，会安装最新的8版本，这样启动项目时总会报错找不到sass-loader，因为太高版本，有时会出现webpack不了。

b. cnpm install node-sass --save-dev

**注意**：安装node-sass时使用淘宝镜cnpm指令，因为防火墙的原因，使用npm指令安装经常会被拦截了导致下载该模块失败导致安装不成功。

最后运行下项目：

为了测试vw相关配置是否生效，在项目中的某个组件中随便写点px的样式：

浏览器中看是否转成vw单位：