这应该是vue项目在适配移动端时候,最简单的方法之一
下面是基本步骤(使用cnpm)
1.下载并引入lib-flexible

cnpm install --save lib-flexible

在main.js中 :import ‘lib-flexible/flexible’
2.引入px2rem-loader

cnpm install --save  px2rem-loader

3.将px2rem-loader添加到cssLoaders

在build/util.js中添加如下代码

代码如下

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75//这个是重点,设计稿是750px
}
}
const loaders = [cssLoader,px2remLoader]

完了就可以直接用px做单位按照750的设计稿撸代码了,

vue中的适配:px2rem的更多相关文章

  1. vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案

    最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...

  2. vue 二三倍图适配,1像素边框

    //文件名为mixin.scss// 2,3倍图适配 @mixin bg-image($url){ background-image: url("~imgs/icon/" + $u ...

  3. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  4. Vue中的$Bus使用

    Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两 ...

  5. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  6. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. iOS 的 APP 在系统中如何适配不同的屏幕的尺寸

    iOS 的 APP 在系统中如何适配不同的屏幕的尺寸 标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...

  8. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  9. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

随机推荐

  1. Spring Web项目spring配置文件随服务器启动时自动加载

    前言:其实配置文件不随服务器启动时加载也是可以的,但是这样操作的话,每次获取相应对象,就会去读取一次配置文件,从而降低程序的效率,而Spring中已经为我们提供了监听器,可监听服务器是否启动,然后在启 ...

  2. SQL TOP 子句

    TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. 注释:并非所有的数据库系统都支持 TOP 子句. SQL Server 的语法: S ...

  3. [小米 Online Judge]找出单独出现的数字

    描述: 给出N个数字.其中仅有一个数字出现过一次,其他数字均出现过两次,找出这个出现且只出现过一次的数字.要求时间和空间复杂度最小. 输入: 输入多个数字,每个数字以空格分开,回车结束 输出: 输出内 ...

  4. 定时器 setTimeout()超时调用和 setInterval()间歇调用

    JavaScript是单线程语言,但它允许通过设置定时器,也就是设置超时值和间歇时间来调度代码在特定的时刻执行.前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码. 超时调用需要使 ...

  5. JavaScript中浅拷贝和深拷贝的区别和实现

    深拷贝和浅拷贝的区别   浅拷贝(shallow copy):只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存:    深拷贝(deep copy):复制并创建一个一摸一样的对象,不共 ...

  6. [MySQL性能优化系列] 聚合索引

    1. 普通青年的索引使用方式 假设我们有一个用户表 tb_user,内容如下: name age sex jack 22 男 rose 21 女 tom 20 男 ... ... ... 执行SQL语 ...

  7. Python学习笔记(1)-列表

    列表是什么? 列表由一系列按特定顺序排列的元素组成.列表看起来像这样:[1,2,3,4,1].在列表中,可以由零个或多个元素组成,元素之间用逗号分开,具有相同值元素允许出现多次 使用[ ]或list( ...

  8. Consul在.Net Core中初体验

    Consul在.Net Core中初体验 简介 在阅读本文前我想您应该对微服务架构有一个基本的或者模糊的了解 Consul是一个服务管理软件,它其实有很多组件,包括服务发现配置共享键值对存储等 本文主 ...

  9. 环境部署(九):linux下安装python+chrome+Xvfb

    在基于selenium进行的UI自动化测试中,开发调试环境一般都是windows操作系统.完成后需要部署到专门的测试环境. 如要要部署到linux环境的服务器(阿里云.腾讯云)执行,那么测试脚本也需要 ...

  10. day92之支付宝支付

    Python之支付宝支付 正式环境:用营业执照,申请商户号,appid 基于支付宝的测试环境:https://openhome.alipay.com/platform/appDaily.htm?tab ...