vue-cli2.0 vw实现移动端适配

参考地址: 如何在Vue项目中使用vw实现移动端适配.

使用vue-cli2.0构建项目适配移动端
项目环境：
win10
node v8.9.3
npm 5.5.1
使用vue-cli命令构建项目

// 构建vue项目
vue init webpack myapp

安装插件

 - postcss-import  
 // 会在项目根目录生成 **.postcssrc.js** 文件 主要是解决@import引入路径问题
 - postcss-url
  // 主要用来处理文件，比如图片文件、字体文件等引用路径的处理 
 - postcss-aspect-ratio-mini
  // 
 - postcss-cssnext
   // 该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理
 - autoprefixer
 // 自动处理浏览器前缀的一个插件
 - postcss-px-to-viewport
  // 主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一
 - postcss-write-svg
  // 主要用来处理移动端1px的解决方案
 - cssnano
  // 主要用来压缩和清理CSS代码
 - postcss-aspect-ratio-mini
 // 主要用来处理元素容器宽高比

其中 postcss-px-to-viewport在**.postcssrc.js**中配置如下

"postcss-px-to-viewport": { 
	viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
	viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
	unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
	viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 					
	selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
	minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
	mediaQuery: false // 允许在媒体查询中转换`px` 
}

最后安装完成之后就可以开始使用vw来适配移动端 ，当你使用px写好css编译之后，你在浏览器取查看的时候单位已经变成了vw；