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 相关文章推荐
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js中日期的加减法
May 06 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
简单实现jquery焦点图
Dec 12 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
js function定义函数使用心得
2010/04/15 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python实现rsa加密实例详解
2017/07/19 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
酒店副总岗位职责
2013/12/24 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
单位授权委托书范文
2014/08/02 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
python 中yaml文件用法大全
2021/07/04 Python
JS 基本概念详细介绍
2021/10/16 Javascript
vue实现Toast组件轻提示
2022/04/10 Vue.js