vue.js移动端app实战1:初始配置详解


Posted in Javascript onJuly 24, 2017

本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到。css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等。

vue.js移动端app实战1:初始配置详解

初始工作:

通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西。
 个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js工具函数。

下载好文件后,npm run dev

启动服务你就会看到熟悉的hello vue。由于我们做的是移动端的页面,所以把chrome切换到手机模式(打开开发工具,ctrl+shift+m或者点左上角那个手机)

对于移动端如何适配不同的手机屏幕,估计每个人都有自己的做法,我用的是淘宝的flexible.js,根据不同类型来缩放以及调整html字体的大小,用rem来布局。使用的方法也很简单,只需要引入Js文件就可以了,github地址。

这里简单介绍一下如何计算rem:

假如设计稿为640,有一个div宽200px,则css应该为width:(200/640)*10=3.125rem

假如设计稿为750,有一个div宽200px,则css应该为width:(200/750)*10=2.666rem

可以发现如果每次量好一个DIV宽后都要用一个计算器算一遍,那这速度也太慢了。

假如你用的是scss,那么可以编写一个函数来处理(函数下面的75px来自设计稿大小,假如设计稿为750,则为75;)

@function torem($px) {
 @return $px / 75px * 1rem;
}

假如你用的sublime编辑器,可以到https://github.com/flashlizi/cssrem 下载一个插件,写起来更方便;

字体的处理:

字体方面我们仍然用px来写,不过需要针对不同的缩放比例写不用的大小,比如安卓下,字体大小为14px,那么iphone6下大小应为28,Iphone6s应为42px。flexible.js会根据屏幕缩放比给html添加data-dpr属性,因此可以通过scss编写mixin来处理字体

@mixin fz($font-size) {
 font-size: $font-size;
 [data-dpr="2"] & {
  font-size: $font-size * 2;
 }
 [data-dpr="3"] & {
  font-size: $font-size * 3;
 }
}

需要用到字体的地方,@include fz(16px);

图片的处理:

通常为了适应retain和非retain屏幕,我们会准备不同的图片大小,也就是2x和3x图,我的做法是[data-dpr="3"]下使用3x图,其他情况统一使用2X图。

在为了方便,编写一个mixin来处理:(假设放在2x文件夹和3x文件夹下)

@mixin dpr-img($url,$name,$type:".jpg"){
 background-image: url($url+"2x/"+ $name+"@2x"+$type);
 [data-dpr="3"] &{
  background-image: url($url+"3x/"+ $name+"@3x"+$type);
 }
}

vue.js移动端app实战1:初始配置详解

第一个参数为2x,3x文件夹所在路径,第二个参数为文件名,第三个参数为文件类型,默认为.jpg结尾。

写CSS时有些代码块可能会经常用到,因此也可以写成mixin,比如单行文本溢出和多行文本溢出

@mixin t-overflow($line:1) {
 @if $line==1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 @else {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 }
}

比如左右垂直居中

@mixin table-center {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

@mixin flex-center {
 display: flex;
 justify-content: center;
 align-items: center;
}

字体图标的处理:

页面通常都会有很多小图标,为了减少请求以前可能会用雪碧图来合并,不过我现在基本不用了,用字体图标来代替。我用的是阿里的在线字体图标,上传svg到阿里字体库或者直接使用阿里的图标,选中图标后添加到项目,生成地址后,import到项目中就可已使用了。

vue.js移动端app实战1:初始配置详解

在App.vue中:

@import url('//at.alicdn.com/t/font_nfzwlroyg2vuz0k9.css');

编写main组件:

页面上底部有4个tab,点击时会切换对应的组件,所以Main组件的结构是这样的

<template>
 <div>
  <router-view></router-view>  
  <foot-nav></foot-nav>
 </div>
</template>

foot-nav底部导航的布局如下:

<template>
 <div class="foot-nav-containner">
  <ul class="bottom-nav">
   <router-link tag="li" to='/index' class="bottom-nav__li iconfont icon-shouye bottom-nav__li--home"></router-link>
   <router-link tag="li" to='/search' class="bottom-nav__li iconfont icon-ss bottom-nav__li--search"></router-link>
   <router-link tag="li" to='/car' class="bottom-nav__li iconfont icon-shoppingcart bottom-nav__li--car"></router-link>
   <router-link tag="li" to='/vip' class="bottom-nav__li iconfont icon-gerenzhongxinxia bottom-nav__li--vip"></router-link>
  </ul>
  </div>
</template>

点击底部每个导航,导航上面的组件都会相应的替换。不过要注意点击购物车时,购物车页面底部需要有去结算按钮,所以购物车页面是没有导航的,也就是说购物车的路由配置时不会放在mian路由的children下面。

编写路由:

 

{
  path:'/',
  redirect:"/home"
 }, 
 {
  path:'/home',
  component:Main,
  children:[
   {
    path:'/',
    redirect:"/index"
   },
   {
    path:'/index',
    component:Index
   },
   {
    path:'/search',
    component:Search
   },   
   {
    path:'/vip',
    component:Vip
   }
  ]
 },
 {
  path:'/car',
  component:Car
 }

我们把home路由设置为默认路由,当路由为空时,就会重定向到home路由,home路由下又把index路由设置为默认路由。我们把car设为单独的路由而不是home下,因此点击导航的购物车时就会从home路由切换到car路由,而由于底部的路由是放置在home路由下,所以到了购物车页面导航也就不存在了,这样基本的配置就差不多完成了。

本节先把基本的结构搭建起来,后续才开始进入每个页面内容的编写。

目前已经写好几个页面,项目已上传到github,地址https://github.com/linrunzheng/vueApp

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

Javascript 相关文章推荐
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
layui文件上传实现代码
May 20 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
React 子组件向父组件传值的方法
Jul 24 #Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 #Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 #Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
php register_shutdown_function函数详解
Jul 23 #Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 #Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 #Javascript
You might like
PHP数据类型的总结分析
2013/06/13 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python运行异常管理解决方案
2020/03/09 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
C语言面试题
2013/05/19 面试题
2014学雷锋活动心得体会
2014/03/10 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
django上传文件的三种方式
2021/04/29 Python