vue-cli配置flexible过程详解

基于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,如下图添加配置

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

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于vue-cli 3配置打包优化要点（推荐）

    关于vue-cli 3配置打包优化要点（推荐）

    配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */ const AsyncComponentHook = (path: String): Function => (): any => { // 通过 webpack 的内联注释,设置模块名 let component = import(/* webpackChunkName: "view-[request]" *

  • 基于vue-cli配置lib-flexible + rem实现移动端自适应

    基于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生成的文件中,找到以下文件 bu

  • 使用vue-cli3新建一个项目并写好基本配置(推荐)

    1. 使用vue-cli3新建项目: https://cli.vuejs.org/zh/guide/creating-a-project.html 注意,我这里用gitbash不好选择选项,我就用了基本的cmd(系统命令提示符):上下箭头和空格键可控制选项. 详细步骤: (1)vue create init: 这里我选择了自定义配置 (2)使用上下箭头和空格进行选择,我这里选择了这四个,之所以没用css pre-processors是因为我的项目中要用postcss-cssnext,后面会有详细

  • vue-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • vue项目中使用lib-flexible解决移动端适配的问题解决

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了. lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size

  • 基于 flexible 的 Vue 组件：Toast -- 显示框效果

    基于 flexible 的 Vue 组件：Toast -- 显示框效果

    基于flexible.js 的 Vue 组件 前言: 目前手头的移动端Vue项目是用手淘的 lib-flexible作适配的,并用px2rem 来自动转换成rem.关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible. 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷. 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中 常用的.简单的 组件

  • 详解vue.js移动端配置flexible.js及注意事项

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexi

  • Vue-Cli 3.0 中配置高德地图的两种方式

    vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存在些问题,所以就放弃了,可能是我的使用方式不对.我所遇到的问题: 1. 安装之后使用,始终提示跨域问题. 2. 页面刷新之后地图出不来,第一次进入页面时没问题.因为这两个问题所以放弃了这个组件的使用.我想可能是我哪个地方代码有问题. 二.直接引用高德地图 SDK 因为第一种方式尝试失败了,所以我选择

  • vue-cli配置flexible过程详解

    vue-cli配置flexible过程详解

    基于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-de

  • Spring基于xml文件配置Bean过程详解

    Spring基于xml文件配置Bean过程详解

    这篇文章主要介绍了spring基于xml文件配置Bean过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 通过全类名来配置: class:bean的全类名,通过反射的方式在IOC容器中创建Bean,所以要求bean中必须有一个无参的构造器. <bean id="helloWorld" class="com.gong.spring.beans.HelloWorld"> <property na

  • Django加载配置的过程详解

    目录 一. Django服务启动 manage.py 二. 引入配置 三. 加载配置 一. Django服务启动 manage.py os.environ.setdefault("DJANGO_SETTINGS_MODULE", "ui.settings") 设置配置文件环境变量- #!/usr/bin/env python import os import sys if __name__ == "__main__": os.environ.se

  • Vue CL3 配置路径别名详解

    Cli3工具中,配置路径别名 最近用Vue Cli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,发现都在vue.config.js里来配置了 配置路径别名,方便引用,不用写那么长 配置前: import TodoList from '../../components/TodoList' 配置后(不用再关心文件层级关系): import TodoList from 'components/TodoList' 在根目录下添加'vue

  • CentOS 7.9服务器Java部署环境配置的过程详解

    CentOS 7.9服务器Java部署环境配置的过程详解

    目录 CentOS 7服务器Java部署环境配置 FTP服务器搭建 设置root用户可登录 jdk安装 mysql安装 开启Navicat远程连接的配置 Tomcat安装 Redis安装 Nginx安装 CentOS 7服务器Java部署环境配置 FTP服务器搭建 1.安装 vsftpd yum install -y vsftpd 2.安装完成后运行以下命令进入/etc/vsftpd目录,并查看该目录下的文件 cd /etc/vsftpd ls 设置root用户可登录 在安装vsftpd默认情况

  • springboot配置redis过程详解

    springboot配置redis过程详解

    在springboot中,默认继承好了一套完好的redis包,可以直接使用,但是如果使用中出了错不容易找到错误的原因,因此这里使用自己配置的redis: 需要使用的三个主要jar包: <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</artifactId> <version>2.9.0</version> </dependency>

  • Vue事件处理原理及过程详解

    Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念.实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难,使用v-on有以下好处: 1.扫一眼HTML模板便能轻松定位在JS代码里对应的方法. 2.无须在JS里手动绑定事件,ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试. 3.当一个ViewModel被销毁时,所有的事件处理器都会自动被删除,无须担心自己如何清理它们.

  • Spring注解配置实现过程详解

    配置注解的支持: 在spring4之后,想要使用注解形式,必须得要引入 aop 的包 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>5.2.8.RELEASE</version> </dependency> 导入 context 的约束,增加注解的支持: <?

  • Django nginx配置实现过程详解

    django 在引入第三方模块的时候保证服务的高可用,要设立一个备份接口,当主接口宕机时可以设置一个超市参数来使用备份的接口. nginx 反向代理器,网站服务器,负载均衡 基本命令 sudo nginx启动 sudo nginx -s stop sudo nginx -s quit sudo nginx -s reopen 关键配置模块 events配置域:网络连接相关配置(I/O模块) server配置域:相关服务节点配置 location http配置域 upstream配置域:反向代理配

  • Vue分页组件实现过程详解

    目录 组件的一些规定和条件 创建分页数组 切换页码 CSS HTML代码 <template> <div class="paging" v-if="count"> <ul> <li class="pre" v-show="page > 1" @click="jian()"> <span>上一页</span> </li>

随机推荐