vue-cli配置flexible过程详解


Posted in Javascript onJuly 04, 2019

基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应

安装flexible

npm install lib-flexible --save

引入flexible

在项目入口文件main.js中添加如下代码,引入flexible

import 'lib-flexible'

px 转 rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

安装px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

vue-cli配置flexible过程详解

是否需要配置importLoaders,可参考最底部的说明。

vue-cli配置flexible过程详解

px2rem 用法

安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。

  • 直接写px,编译后会直接转化成rem ---- 除开下面两种情况,其他长度用这个
  • 在px后面添加/*no*/,不会转化px,会原样输出。 --- 一般border需用这个
  • 在px后面添加/*px*/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个

示例代码

编译前(自己写的代码)

.selector {
  width: 150px;
  height: 64px; /*px*/
  font-size: 28px; /*px*/
  border: 1px solid #ddd; /*no*/
}

编译后(打包后的代码)

.selector {
  width: 2rem;
  border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
  height: 32px;
  font-size: 14px;
}
[data-dpr="2"] .selector {
  height: 64px;
  font-size: 28px;
}
[data-dpr="3"] .selector {
  height: 96px;
  font-size: 42px;
}

重启项目,就可以愉快的用设计稿上的px了。

注意:坑

不能在index.html的头部加 name 为 viewport 的 meta 标签,flexible会自动为我们添加!

对外部引入css,px2rem能不能转换rem问题

在实际运用中发现对于外部引入的css文件,有时候px2rem能正常转换,有时候又不能转换,到底是什么原因呢?试验了三种不同的css引入情况,发现第一种能正常转换,二三不能正常转换,至于原因,由于才疏学浅,还是不懂,求大神解答三种引入方式的区别。

如果明白了这些方法,就没必要再配置cssLoader的importLoaders了,因为下面的方法更容易控制外部引入的css是否需要转rem,而更改importLoaders就控制不了了,它会强制转换。

<style src='../assets/style.css'>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
纯js简单日历实现代码
Oct 05 Javascript
JavaScript中return false的用法
Mar 12 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
JS数组的常用10种方法详解
May 08 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
vue动态配置模板 'component is'代码
Jul 04 #Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 #Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 #Javascript
vue如何限制只能输入正负数及小数
Jul 04 #Javascript
Vue项目中ESlint规范示例代码
Jul 04 #Javascript
你或许不知道的一些npm实用技巧
Jul 04 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
Python Property属性的2种用法
2015/06/21 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
应届生面试求职信
2014/07/02 职场文书
2015年招聘工作总结
2014/12/12 职场文书
入党转正申请报告
2015/05/15 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书