总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案:

1.安装淘宝lib-flexible

npm install lib-flexible --save

2.在入口文价main.js中引用flexible

import 'lib-flexible'
3.由于在开发中rem和px手动转换比较麻烦,所以建议安装px2rem这个工具
3.1安装px2rem工具
npm install px2rem-loader --save-dev
3.2在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加3处配置

重启下服务,就可以使用px作为设计稿(750px)给的单位使用啦,项目打包后px会自动转换为rem。

vue+vue-cli+淘宝lib-flexible做移动端自适应的更多相关文章

  1. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  2. 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  3. vue实现仿淘宝结账页面

    这个demo,是小颖基于之前的 vue2.0在table中实现全选和反选   文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图: ...

  4. vue实现结算淘宝购物车效果

    实现单选时的价格,全选时价格 单选效果图 全选效果图 html <template> <!-- 淘宝结算购物车 --> <div class="settleme ...

  5. flexible.js 移动端自适应方案

    一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...

  6. 淘宝适配 flexible.js

    1.引入 阿里cdm文件,也可以自己下载下来引用,不需要在添加<meta name="viewport"">标签了 <script src=" ...

  7. (转)从P1到P7——我在淘宝这7年

    (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘宝已经七周年了.很多人第一句话就是七年痒不痒,老实说,也曾经痒过,但往往都是一痒而过,又投入到水深火热的工作中去.回家之后 ...

  8. 淘宝杨志丰:OceanBase--淘宝结构化大数据解决之道

    时至今日,“Big data”(大数据)时代的来临已经毋庸置疑,尤其是在电信.金融等行业,几乎已经到了“数据就是业务本身”的地步.这种趋势已经让很多相信数据之力量的企业做出改变.恰逢此时,为了让更多的 ...

  9. 从P1到P7——我在淘宝这7年(转)

    作者: 赵超  发布时间: 2012-02-25 14:47  阅读: 114607 次  推荐: 153   [收藏] (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘 ...

随机推荐

  1. [批处理]使用Log.io监控日志变化

    背景 多台服务器安装了不同的开发服务,增加日志监控以随时处理情况 方案 log.io 环境 NodeJs 安装 1.log.io直接无法安装上,使用log.io-ts安装上 npm install - ...

  2. Log4j介绍与使用

    Log4j三大组件 1) 日志记录器Logger负责输出日志信息,并能够对日志信息进行分类筛选,决定哪些日志信息应该被输出,哪些该被忽略.Loggers组件输出日志信息时分为5个级别:DEBUG.IN ...

  3. Vue组件的定义、注册和调用

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组 ...

  4. Xamarin.Forms踩坑集锦(持续更新)

    1.ImageButton控件 问题:ImageButton在切换图片的时候,图片大小会改变. Github Issue:ImageButton changes image size · Issue ...

  5. C# 反射 Type.GetType()

    对于外部调用的动态库应用反射时要用到Assembly.LoadFile(),然后才是获取类型.执行方法等;当用反射创建当前程序集中对象实例或执行某个类下静态方法时只需通过Type.GetType(&q ...

  6. linux使用vim打开乱码问题

    在windows中编辑好的汉字文本文档,上传到Linux下打开乱码. [root@localhost ~]# rpm -ivh /mnt/Packages/lrzsz-0.12.20-36.el7.x ...

  7. Kafka启动报错 : ERROR Processor got uncaught exception

    参照我之前的一篇博文Kafka学习之(二)Centos下安装Kafka安装了kafka并启动,状况并不像我之前最初的预期,报错了,并且我在当前Linux环境下安装的Java版本.Kafka版本都是和之 ...

  8. 【题解】Luogu P4396 [AHOI2013]作业

    原题传送门 最快的解法好像是cdq,但窝只会莫队+线段树/树状数组的做法 题目要我们求1.在区间[l,r]中值域在[a,b]中有多少个数2.在区间[l,r]中值域在[a,b]中有多少个不同数 一眼就看 ...

  9. CSc 352 (Spring 2019): Assignment

    CSc 352 (Spring 2019): Assignment 11Due Date: 11:59PM Wed, May 1The purpose of this assignment is to ...

  10. 《内蒙古自治区第十三届大学生程序设计竞赛试题_H 公孙玉龙》

    这个题有点小坑,最坑的地方就是  输入的b 变量  有可能 是  负数  !   负数 !  负数!    对 ,你没有看错,就是负数,坑死我了, 一直都是  content.charAt(0) 判断 ...