详解vue移动端项目的适配(以mint-ui为例)


Posted in Javascript onAugust 17, 2018

1、使用vue-cli脚手架生成项目骨架,略。

2、相关配置:

rem适配:

index.html加入以下代码,并在head中加入以下meta;

<script>
  (function (doc, win) {
   var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
     var clientWidth = docEl.clientWidth;
     if (!clientWidth) return;
     docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
   if (!doc.addEventListener) return;
   win.addEventListener(resizeEvt, recalc, false);
   doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
 </script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, shrink-to-fit=no,user-scalable=0">

3、按照mint-ui的官网对按需引用进行配置,.babelrc文件(安装相关的包)

{
 "presets": [
  ["env", { "modules": false }]
 ],
 "plugins": ["transform-vue-jsx", "transform-runtime",["component", [
  {
   "libraryName": "mint-ui",
   "style": true
  }
 ]]]
}

4、相关loader配置

安装npm i postcss-px2rem-exclude --save-dev

进入build/vue-loader.conf.js文件

详解vue移动端项目的适配(以mint-ui为例)

5、在页面中按需引入即可

详解vue移动端项目的适配(以mint-ui为例)

6、That's all!!!

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 #Javascript
Vue登录注册并保持登录状态的方法
Aug 17 #Javascript
小程序清理本地缓存的方法
Aug 17 #Javascript
layui table设置前台过滤转义等方法
Aug 17 #Javascript
详解小程序缓存插件(mrc)
Aug 17 #Javascript
layui 设置table 行的高度方法
Aug 17 #Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 #Javascript
You might like
PHP的FTP学习(二)
2006/10/09 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php编程每天必学之表单验证
2016/03/01 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
初中升旗仪式演讲稿
2014/05/08 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书