vue.js移动端app:初始配置
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到。css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等。
初始工作:
通过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);
}
}
第一个参数为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到项目中就可已使用了。
在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
vue.js移动端app:初始配置的更多相关文章
- vue.js移动端app实战2:首页
貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...
- vue.js移动端app实战3:从一个购物车入门vuex
什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...
- vue.js移动端app实战2
貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects,简单 ...
- vue.js移动端app实战1:初始配置
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述 ...
- vue.js移动端app实战1
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述 ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- ASP.NET Core 与 Vue.js 服务端渲染
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...
- NET Core 与 Vue.js 服务端渲染
NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...
- 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
随机推荐
- codeforces1187E
题目链接:http://codeforces.com/problemset/problem/1187/E E. Tree Painting You are given a tree (an undir ...
- 4)抽象方法不能为private,final或者static,为什么?
抽象方法的最实质的意 义在于被未来的子类覆盖实现掉.它自己是个空方法.private的实质意义在于本类其他方法调用它.你自己是个空方法,别人调用你有什么用?所以 abstract和private在一起 ...
- @AUTORELEASEPOOL
Swift 在内存管理上使用的是自动引用计数 (ARC) 的一套方法,在 ARC 中虽然不需要手动地调用像是 retain,release 或者是 autorelease 这样的方法来管理引用计数,但 ...
- Java的反射是什么?有什么用?
首先我要简单的来说一下什么是Java的反射机制: 在Java里面一个类有两种状态--编译和运行状态,通常我们需要获取这个类的信息都是在编译阶段获得的,也就是直接点出来或者new出来,可是如果需要在类运 ...
- 最简单的SpringAop 小案例
网盘下载地址: 链接:https://pan.baidu.com/s/1Z-em-1ouWyXeMP3JW0IbCg 提取码:0o4o 1.目录结构: 2.配置文件 applicationCo ...
- 什么是IO流
先看一段百度上的解释: 当然:如果你看不懂,那么你只需要记住下面3句话. 1. (1).我们知道,每个人家里喝的水都是从自来水厂来的,自来水厂的水又是从水源地来的, (2).水是通过水管来的. (3) ...
- arcgis python 异常处理和信息处理
#coding=utf8 import arcpy import os import sys import ylpy try: a=1111111 b=0000 c=a/b except Except ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_17-身份校验-身份校验过虑器编写
5 身份校验 5.1 需求分析 本小节实现网关连接Redis校验令牌: 1.从cookie查询用户身份令牌是否存在,不存在则拒绝访问 2.从http header查询jwt令牌是否存在,不存在则拒绝访 ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_16-认证接口开发-Api接口定义
4.3 认证服务 4.3.1 需求分析 认证服务需要实现的功能如下: 1.登录接口 前端post提交账号.密码等,用户身份校验通过,生成令牌,并将令牌存储到redis. 将令牌写入cookie. 2. ...
- LeetCode_111. Minimum Depth of Binary Tree
111. Minimum Depth of Binary Tree Easy Given a binary tree, find its minimum depth. The minimum dept ...