Vue移动端适配，Vue一键px2rem，px2rem-loader安装使用教程

上一篇介绍了怎么安装Webstorm插件px2rwd，在开发中可以帮助我们快速地进行px和rem的换算。下面来介绍一种在Vue中px2rem的模块，该模块会自动地将px转换成rem，而不用再去换算，方便我们以后去检查项目。在写项目的过程中，我们直接写px即可，它会根据我们屏幕的大小自动地进行px和rem的换算，非常方便，快来看一下吧

前提准备：已经是使用vue-cli搭建好的项目

vue-cli搭建项目步骤如下

1. npm i vue-cli -g
2. vue init webpack demo(项目名)
3. cd demo
4. npm start

1、搭建好项目之后，安装相应的插件

1、安装lib-flexible包

npm i lib-flexible --save

2、安装px2rem-loader插件

 npm i px2rem-loader --save

安装完成之后，在package.json可以看到

2、配置px2rem-loader插件

在main.js引入lib-flexible插件

import 'lib-flexible'

在build --> utils.js文件里的exports.cssLoaders配置px2rem-loader插件
代码如下：

// 配置px2rem-loader
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      // 根据你的设计稿而定，remUnit = 设计稿 / 10;
      /**
       * 根据你的设计稿而定
       * 比如750px的设计稿，remUnit = 750 / 10 = 75;
       * 640的设计稿，remUnit = 640 / 10 = 64;
       */
      remUnit: 75
    }
  }

不要忘了还要在generateLoaders 函数里面把px2remLoader添加进去哦

3、重启vue项目即可生效

npm start 

4、效果如下图

可以看到，在vue文件里面还是px的单位，到浏览器中就自动地被转成了rem，非常方便，而且会跟着屏幕的变化而不断地变化，再也不用手动去考虑适配的问题了

5、说明

这个插件的原理和我们手动设置html元素的font-size其实差不多，是根据屏幕的大小去改变font-size的值，图中可以看到html的font-size不停地在变化

【注意】这个默认最大的宽度是540px，但宽度大于540px时，就font-size就不再发生变化，默认是54px

6、后记

由于知识有限，有写得不对的欢迎大家指正
【上一篇，Webstorm安装px2rem插件】