vue-cli2.x 3.x 实现完美的移动端适配【完美还原设计图UI的方法】

需求：自己经常会用vue脚手架做web移动端开发相关的项目，用了非常多的适配移动端的方法，其中包括有：

• 最原始的百分比流式布局
• 类似bootstrap/element的栅格布局
• css3的媒体查询（@media）+rem单位
• 利用js监听设备宽度动态实现加载不同的css文件
• 淘宝的flexible.js(不得不说淘宝的解决方案不错，但已经被淘宝弃用了)

现在最为流行的适配方案就是今天重点说的方法：通过vue脚手架的postcss的配置利用vw来达到完美还原设计ui图纸的方法。

使用此方法的前提条件：

必须是使用vue-cli脚手架的项目【 node +npm+webpack+vue+vue-cli3.x/vue-cli2.x 】

使用步骤：

1.新建一个Vue脚手架项目

2.开始配置postcss插件

2.1打开 postcss.config.js(cli3.x) || .postcssrc.js(cli2.x)

如果打开的文件里面内容不同的有缺少的话请先使用下面三个命令安装基础插件

npm install  postcss-import
npm install  postcss-url
npm isntall  autoprefixer

//打开之后应该有的默认的插件
module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "autoprefixer": {}
    }
}	

2.2 开始安装转换vw的相关的插件

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

使用的命令是：

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S   

2.3 最后配置postcss: 替换这个文件中的内容为下面的内容 postcss.config.js(cli3.x) || .postcssrc.js(cli2.x)

module.exports = {
  plugins: {
      "postcss-import": {},
      "postcss-url": {},
      "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
          utf8: false
      },
      "postcss-cssnext": {},
      "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`
      },
      "postcss-viewport-units":{},
      "cssnano": {
          preset: "advanced",
          autoprefixer: false,
          "postcss-zindex": false
      }
  }
}

2.4 如果运行出现报错信息，可能是缺少devanced 插件，安装对应插件即可：

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

3.配置完成之后我们的盒子字体的大小就直接按照设计图纸给的大小去写，我们的插件会自动为我们转化为当前设备对应的大小，代码中的单位全部使用 px。

单位转化：100vw = 750px 相当于：1vw = 7.5px
源代码：

   .box{
        width: 500px;
        height: 200px;
        background: red;
        font-size: 20px;
    }

浏览器解析的代码：

.box[data-v-39f87be5] {
    width: 66.667vw;
    height: 26.667vw;
    background: red;
    font-size: 2.667vw;
    content: "viewport-units-buggyfill; width: 66.667vw; height: 26.667vw; font-size: 2.667vw";
}

总结

以上就是通过 VW 的vue插件实现整个移动端适配的方法实现，这种方法目前为止还是比较完美的，通过这个方法可以实现完美还原任何设计图的原始大小比例等，不管是布局还是盒模型的宽高，或者是字体的大小都可以通过这个方法实现。