vue移动端项目使用第三方ui框架适配rem的问题

近期使用vue开发移动端项目，引入了mint-ui框架。由于mint-ui框架中css样式使用了px作为单位，无法使用rem适配不同设备的屏幕。

方案一，使用px2rem-loader将px转为rem

第一步：在终端中安装px2rem-loader

npm install px2rem-loader --save-dev
复制代码

第二步：然后在vue-cli项目找到build/utils文件，在里面加上以下代码：

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 75
    }
}
复制代码

因为我们这边UI设计图是750的尺寸，所以我就把转换比设成了75，其实设成多少无所谓，反正插件会帮你计算的。

第三步：在当前文件中修改配置，如下图：

第四步：在入口文件中引入lib-flexible，进行适配。

前提是先安装后引入。安装命令：

npm install lib-flexible --save-dev
复制代码

之后就可以在项目中放心使用px了，插件会帮你自动转换的哦！！！

方案二，使用IDE自带的转换器。

我使用的是VS code，在扩展程序中安装px2rem之后，在配置中修改转换比即可。如下图：