前言：本demo是基于脚手架3创建的vue项目，主要演示的是如何使用vw实现移动端适配；并且在项目中如何引入自定义的less全局变量。
一. 配置vw适配：
1. 安装以下插件：
npm installcssnano postcss-aspect-ratio-minipostcss-px-to-viewport postcss-viewport-units postcss-write-svg postcss-cssnextpostcss-import postcss-url cssnano-preset-advanced--save-dev
安装完可以看下package.json文件，看是否安装齐全：
2.创建 .postcssrc.js 文件
脚手架3创建的项目没有自动生成.postcssrc.js文件，所以需要自己在项目根目录下创建该文件：
在该文件加入这些内容：
提示：做完上边的操作后，当你启动项目时，会发现还会报错，报什么xxx 'dead'
其实只要进入下面该文件删除not dead即可，这时，项目即可正常跑起来了
二. 实现在vue项目中使用less全局样式变量
1.安装 less less-loader
做完上边的vw适配，下边开始配置使用less，其实在使用脚手架3创建项目时，是可以选择css预处理器类型的，我这里手动安装点快了，没有选择安装css预处理器，所以需要自己安装less依赖包：
npm install less less-loader --save
安装后可以查看先package.json文件，看是否安装成功：
2.安装vue-cli-plugin-style-resources-loader
安装完less后，如果你想使用less自定义样式变量，作为全局引入使用，你需要安装下边该插件：
npm install vue-cli-plugin-style-resources-loader-save
3.创建vue.config.js文件，配置less样式文件的路径
安装完上边的插件后，需要自行创建vue.config.js文件，并在该文件配置以下内容，
需要注意的是，指定全局less文件的路径时，不能使用别名路径：
到这里使用vw实现移动端适配和定义less全局文件已经配置完毕。
三. 看下项目的效果：
1. 先看下vw配置是否生效：
浏览器确实已经自动换算成vw，说明vw配置成功了
2. 看下配置less全局样式文件是否成功：
在组件中使用less文件定义的变量：
到这里说明配置全局less文件成功了，less中定义的样式变量，在当前项目中的任何组件都可以直接使用less文件中定义的变量。
