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以后，在配置中修改转换比便可。以下图：