总结用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. JS 画框操作

    Js中,我们有时候需要对图片进行操作,包括画框,其实对于UI前端来说挺简单的,没有网上说的那样复杂,这里说明一下 <div style="width:80%;height:300px; ...

  2. 20175208 《Java程序设计》第八周学习总结

    20175208 2018-2019-3<Java程序设计>第八周学习总结 一.教材学习内容总结: 1.泛型: 泛型的主要目的是可以建立具有类型安全的集合框架(如链表.散列映射等数据结构) ...

  3. Redis做分布式锁

    在分布式系统中,在接口没有保证幂等性或者在某些场景下相同的服务需要有且仅有一个服务执行的情况下,需要使用分布式锁来保证系统的安全执行. 分布式锁的执行顺序,有服务A,分别部署了三个节点为A1.A2.A ...

  4. GO语言从入门到放弃目录

    GO语言基础 第一个GO程序 GO语言常量和变量 GO语言数据类型 GO语言流程控制 GO语言数组 GO语言切片 GO语言 map GO语言函数 GO语言指针 Go语言接口 GO语言常用包 GO语言的 ...

  5. c#的几种数据结构

    Array/ArrayList/List/LinkedList/Queue/Stack/HastSet/SortedSet/Hashtable/SortedList/Dictionary/Sorted ...

  6. nginx运用

    1.nginx的 命令 start nginx 这样,nginx 服务就启动了.打开任务管理器,查看 nginx.exe 进程,有二个进程会显示,占用系统资源,那是相当的少.然后再打开浏览器,输入 h ...

  7. Haproxy官方文档翻译(第三章)全局参数(1) 附英文原文

    3.全局参数 在global这个节点里的参数是“进程范围的”并且经常是“操作系统指定”的.它们通常是一次性设置而且一旦正确设置不需要动来动去的.它们中的一些和命令行对应. global节点支持以下关键 ...

  8. linux查看与修改交换内存配置(解决zabbix-agent启动报错)

    问题 zabbix-agent在一台centos6.5上启动报错: cannot allocate shared memory of size 949056: [28] No space left o ...

  9. Pandas截取列部分字符,并据此修改另一列的数据

    #截取'股票代码'第一个字符 df['首字符'] = df['股票代码'].str[0:1] ' # 根据'首字符'列的值,修改'市场'的值. 1表示上海 截取字符串的部分字符: date=today ...

  10. MySql-2019-4-21-复习

    数据库对象:存储,管理和使用数据的不同结构形式,如:表.视图.存储过程.函数.触发器.事件.索引等. 数据库:存储数据库对象的容器. 数据库分两种: 系统数据库(系统自带的数据库):不能修改 info ...