使用移动端时，适配是必须的。使用rem单位，相同的布局可以在不同的屏幕上完美显示。px2rem插件方便地将px单位转换为rem。1、自己手动搭建vuewebpck配置在开发过程中，我们直接按照css文件中的设计稿，直接以px像素为单位，然后在实际应用中，我们希望px自动转换为rem单位，那么如何让构建工具自动转换这个呢？想一想，我们的构建工具其实主要还是来自于vue。在vue文件中，我们使用vue-loader。如果你使用vue-cli脚手架，你要添加这个功能并不容易。但是当我们手动构建构建工具时，就没有任何限制，想怎么用就怎么用。按照刚才的思路，我们知道几乎所有的文件都是vue文件，所有的loader都是vue-loader。在webpack配置中，我们可以对一个文件使用多个loader，也可以配合vue-loader使用其他loader，那么如何使用呢？这个要去看官方的vue文档。在这里，我为您找到了这份文件。通过官方文档我们可以了解到，使用sass-loader需要在vue-loader中添加一个option来配置相应的loader。我们现在要做的就是自动将px转为rem，所以有一个类似这个的类，只要我们加上转换的loader，哪个loader可以自动将px转为rem呢？那么我们如何找到它呢？不知道的时候，我们可以去npm.js官网，然后我们可以猜到输入px,rem，从图中可以看出有一个px2rem2-loader，还有一个下面的px2rem，我们直接搜索px2rem。有很多加载程序，例如px2rem。平时我们使用px2rem比较多，所以这里介绍一下px2rem。其他loader可以自行研究！点进去，我们可以看到里面有关于如何安装和如何导入的介绍。我们可以模仿Vue官网的写法。如上图所示，我们主要注意loader的解析顺序是从右到左解析的。px2rem官网没有.loader这个后缀，webpack2.0之后是不允许的，所以这里需要加上后缀。scss文件首先需要把scss转成普通的css，然后交给px2rem.loader，所以需要加一个sass-loaderremUnit:750//designdraftwidth/10,remPrecision:表示保留多少位小数在转换过程位。2.使用vue-cli构建px2rem.loader1)。下载lib-flexible，我使用的是vue-cli+webpack，所以是通过npm安装的npmilib-flexible--save2)在main.js中引入lib-flexible引入lib-flexibleimport'lib-flexible/flexible'3)安装px2rem-loadernpm安装px2rem-loader4)。配置px2rem-loader在build下的utils.js中，找到generateLoaders方法添加到这里。安装配置完成后，重启项目。然后在浏览器中查看。你会发现你设置的px已经转换为rem了。愿你成为终身学习者
