Vue前端适配vw方案

前端适配的目的是对于不同屏幕的分辨率，最大程度按设计要求显示。vw方案的原理就是根据视窗宽度自动计算页面尺寸，包括高度、宽度和字体。
1、检查项目
检查根据脚手架生成的项目，应该包括postcssrc.js，该文件的默认内容为：
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "autoprefixer": {},
  }
}
2、安装插件
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --S
具体插件介绍如下：
（1）、postcss-import
主要功有是解决@import引入路径问题。
使用这个插件，可以很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url使引入文件变得更轻松。
（2）、postcss-url
主要用来处理文件，比如图片文件、字体文件等引用路径的处理。
（3）、postcss-px-to-viewport
主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
（4）、postcss-viewport-units
主要是给CSS的属性添加content的属性，给vw、vh、vmin和vmax做适配的操作，这是实现vw布局必不可少的一个插件。
（5）、postcss-cssnext 
该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
（6）、cssnano
主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
（7）、postcss-write-svg
主要用来处理移动端1px的解决方案。
（8）、postcss-aspect-ratio-mini
主要用来处理元素容器宽高比。
安装成功后可以在package.json中看到安装的依赖包
"dependencies": {
"cssnano": "^4.1.10",
  "cssnano-preset-advanced": "^4.0.7",
  "postcss-aspect-ratio-mini": "^1.0.1",
  "postcss-cssnext": "^3.1.0",
  "postcss-px-to-viewport": "^1.1.1",
  "postcss-viewport-units": "^0.1.6",
  "postcss-write-svg": "^3.0.1",
  "vue": "^2.5.2",
  "vue-router": "^3.0.1"
}
3、插件配置
在postcssrc.js文件中修改
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini":{},
    "postcss-write-svg": {
      utf8: false
    },
    // to edit target browsers: use "browserslist" field in package.json
    //"autoprefixer": {}
  },
  "postcss-cssnext":{},
  "postcss-px-to-viewport": {
    viewportWidth: 1920,
    viewportHeight: 1080,
    unitPrecision: 3,
    viewportUnit: 'vw',
    selectorBlackList: ['.ignore','.hairlines'],
    minPixelValue: 1,
    mediaQuery: false
  },
  "postcss-viewport-units":{},
  "cssnano":{
    preset: "default",
    "postcss-zindex": false
  }
}
4、问题处理
安装插件时失败，对node版本升级后，插件安装成功。
命令为：npm install -g n --force