vue中使用px2rem的安装以及配置详细步骤

原创 前端のBoss 教程 vue 171阅读 2018-07-07 20:04:49 举报

前言

何为px2rem?

  1. 简介:对于使用过vue的同学可能对于px2rem并不陌生,它其实是一个可以npm到vue项目中的一个插件。
  2. 主要功能:vue做移动端适配,借助px2rem 插件方便的将px单位转为了rem。

    以上对于px2rem的阐述可能太不官方了,但确是最浅显易懂的。

详细的安装步骤如下

  1. First of all,必须要先通过vue-cli创建一个vue项目,至于如何创建,请看链接:搭建vue-cli,这里就不进行过多的解释了,详情自己参考。
  2. 部署好vue项目后,接下来的操作:
    DOS命令 cd进入指定的vue文件目录,再进行:

    在项目入口文件main.js中引入lib-flexible

    在build下的 utils.js中,找到generateLoaders 方法,替换成:
总结:px2rem插件安装也就到此结束,可以试着写一个例子,你会发现在移动端F12下调试不同机型,相应的px值都被转化为了rem。有什么疏漏或者不懂的地方,可以私信我,我晚上一般都在的,Thank you!
评论 ( 1 )
最新评论
前端のBoss 2018-07-10 19:32:54 1F

'remUnit': 75
忘了说明这个值“75”,这是设计稿的宽度/10后的值,具体根据ui设计稿来修改。