在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Iphone5上因为屏幕太小部分页面内容被遮挡了,影响用户正常使用和体验,当然还有一些细节需要优化,比如移动端的1像素边框问题,移动端的300毫秒点击延迟等,这些都可以进行一些优化,从而把用户体验做到更好.

标签内添加viewpoit,以此来动态的获取用户设备的屏幕宽度和不允许用户手动放大和缩小页面等.

在进入开发中,经常会用到一些图标,比如箭头,搜索等,这些小图标无需去制作,使用阿里巴巴提供的这些图标库即可又快又好的实现酷炫的UI效果,而且页面渲染会比使用图片更快.

进入后可以注册或者关联github账号.

然后创建一个你即将开发的项目,并把项目中需要的图片都可以通过添加购物车的形式添加进该项目

然后下载压缩包->解压->拷贝iconfont.css及iconfont.css里url里指定的那些文件至你项目的assets下(推荐自己建个文件夹专门存放这些内容).

然后修改iconfont.css中的url,修改成当前项目中该文件对应的位置即可.

在main.js中引入iconfont.css,然后打开浏览器按F12测试,如果控制台无警告及错误即配置成功.

最终效果大家自己试试，回复留言讨论！

vue多页面开发_使用VUE进行移动端H5页面开发前准备相关推荐

  1. h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口

    这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...

  2. android H5开发出现广告,常见的移动端H5页面开发遇到的坑和解决办法

    转自:https://www.cnblogs.com/LiuJL/p/7744473.html 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什 ...

  3. vue实现移动端H5页面截图

    vue实现移动端H5页面截图 1.vue使用html2canvas实现移动端H5页面截图并下载. 2.html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个html2canva ...

  4. 内置h5 调用safari系统浏览器打开_开发教我做设计：移动端H5页面中的橡皮筋效果...

    什么是橡皮筋效果(Over Scroll)? 在浏览被H5与iOS客户端混合编程的页面时,由于Safari浏览器的特性,当H5页面滑动到页面顶部.页面底部的位置时,继续下拉/上拉H5网页会出现&quo ...

  5. 移动端H5页面编辑器开发实战--原理结构篇

    一.前言 在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...

  6. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  7. 移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...

  8. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  9. 移动端h5游戏开发中的动画和动效展示

    在移动端h5游戏开发中,经常会遇到动画和动效的展现需求,比较常用的实现方法有css3.svg.定时器等,针对不同的场景和需求使用不同的技术,可以提升设计和开发的效率,保证产品的效果和质量,也能让用户有 ...

  10. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

最新文章

  1. silver light
  2. 语句include和require的区别是什么？
  3. mysql查询报错： ORDER BY clause is not in GROUP BY..this is incompatible with sql_mode=only_full_group_by
  4. jq 和java 多张图片_JQ实现多图片预览和单图片预览
  5. python怎么开始打代码_Python代码写好了怎么运行？
  6. Vue打包并发布项目
  7. 【优化算法】缎面弓箭鸟优化(SBO)【含Matlab源码 1432期】
  8. BIGEMAP下载离线地图数据(支持谷歌、百度、高德等所有地图源)
  9. Git问题解决方案:不建议在没有为偏离分支指定合并策略时执行pull操作(Pulling without specifying how to reconcile divergent branches)
  10. 中标麒麟桌面操作系统6.0安装步骤
  11. nginx 上传文件漏洞_nginx 0day漏洞 上传图片可入侵百万台服务器
  12. 计算机专业毕业设计题目大全(持续更新)
  13. 《大数据之路：阿里巴巴大数据实践》-第4篇 数据应用篇 -第16章 数据应用
  14. iOS 中可能用到的数学公式（绝对值、平方、取整、正余弦）
  15. [0CTF 2016]piapiapia BUUCTF 详细writeup
  16. 第三只眼监控软件第三只眼网络监控软件
  17. 解决鼠标右键特别慢的方法
  18. 陪玩MM千千万，谁是你的NO.1？使用Python获取陪玩照片进行颜值检测打分
  19. Postgresql日期转字符串
  20. Python 中 concurrent.futures 模块使用说明

热门文章

  1. javascript之生成一个指定范围内的随机数
  2. c#开发大全、系列文章、精品教程
  3. iptable详解概念
  4. Python: Shuffle()的作用
  5. Jmeter之__CSVRead随机读取变量
  6. 【工具】(转)PowerDesigner最基础的使用方法入门学习
  7. 结对项目：黄金点游戏（何珠赵艳）
  8. spring加载jar包中多个配置文件
  9. [转载] real和imag在python_Python numpy.imag() 使用实例
  10. 异步复位同步释放机制-系统完美稳定