通过meta标签对viewport的设置，定义了页面的缩放比例；要理解这些参数的意义，咱们须要先晓得几个视口宽度的意义。
layoutviewport布局宽度，就是网页的宽度
visualviewport可是宽度，就是浏览器窗口的宽度，这个值决定了咱们手机一屏能看到的内容；visualviewport和layoutviewport的
大小关系，决定了是否会呈现滚动条，当visualviewport更大或者刚好等于layoutviewport时是不会呈现滚动条的。
idealviewport为浏览器定义的可完满适配挪动端的viewport，固定不变，能够认为是设施视口宽度device-width。
meta的设置其实就是对layoutviewport和visualviewport进行设置。
width=device-width示意页面宽度layoutviewport与设施视口宽度idealviewport统一
initial-scale=1示意页面宽度和网页宽度与设施视口宽度的初始缩放比例，visualviewport由这个比例决定，然而对于layoutviewport来说，它同时受到两个属性的影响，而后取其中较大的那个值。
user-scale=no禁止缩放
所以当初咱们晓得，这段在挪动端常见的代码的意思，行将visualviewport和layoutviewport设置为idealviewport的域名交易值；这样咱们在挪动端就不会呈现滚动条，网页内容能够比拟好的展现进去，在这个前提下咱们再思考页面的适配问题。
UI出图的时候个别是有一个固定的宽度的，而咱们理论的挪动端设施的宽度却都不太一样，然而如果页面元素的缩放比例和页面宽度的缩放比例统一，在不同尺寸的设施下咱们网页的成果也将会是统一的。
应用绝对单位
rem
rem 是绝对于根元素 html 的 font-size 来做计算。通常在页面初始化时加载时通过对document.documentElement.style.fontSize 设置来实现。个别咱们将根元素html的font-size设置为宽度的1/10，不同设施的宽度不同，然而同样数值的rem比例与设施的宽度比例是统一的。
在理论我的项目中咱们毋庸在开发中本人进行转换，能够应用pxtorem在输入的时候将px转换为rem。
视口单位
将视口宽度window.innerWidth和视口高度window.innerHeight（即layoutviewport）等分为 100 份。
vw : 1vw 为视口宽度的 1% vh : 1vh 为视口高度的 1% vmin : vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值
和rem相比拟，视口单位不须要应用js对根元素进行设置，兼容性稍差，然而大部分设施都曾经反对了，同样的无须再开发时进行单位换算，间接应用相干的插件postcss-px-to-viewport在输入的时候进行转换。
批改viewport
之前咱们提到了layoutviewport布局宽度实际上不是一个固定值，而是通过meta设置属性，通过idealviewport计算出来的值，咱们能够通过管制meta的属性来将layoutviewport固定为某一个值。个别设计图的宽度为750px，当初咱们的指标就是将layoutviewport设置为750px；layoutviewport受到两个属性的影响，width属性咱们之间设置为750，initial-scale缩放比例应该为idealviewport的宽度/750；当咱们未扭转meta标签属性的时候，layoutviewport的值其实就是idealviewport的值，所以能够通过document.body.clientWidth或者window.innerWidth来获取。
布局款式
布局的形式能够是各种各样的，然而出于兼容性的思考，有些款式咱们最好防止应用，难以解决的问题，那就不去面对。
须要审慎看待的fixed
position:fixed在日常的页面布局中十分罕用，在许多布局中起到了要害的作用。它的作用是：position:fixed的元素将绝对于屏幕视口（viewport）的地位来指定其地位。并且元素的地位在屏幕滚动时不会扭转。然而，在许多特定的场合，position:fixed的体现与咱们设想的天壤之别。
iOS弹出键盘；软键盘唤起后，页面的 fixed元素将生效（iOS认为用户更心愿的是元素随着滚动而挪动，也就是变成了 absolute定位），既然变成了absolute，所以当页面超过一屏且滚动时，生效的 fixed 元素就会追随滚动了。
当元素先人的 transform 属性非 none时，定位容器由视口改为该先人。说的简略点，就是position:fixed的元素会绝对于最近的并且利用了transform的先人元素定位，而不是窗口。导致这个景象的起因是应用了transform的元素将创立一个新的重叠上下文。重叠上下文（Stacking Context）：重叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的绝对于面向（电脑屏幕的）视窗或者网页的用户的z 轴上延长，HTML元素根据其本身属性依照优先级程序占用层叠上下文的空间。程序如下图所示，总之重叠上下文会对定位关系产生影响。想要进一步能够查看不受管制的position:fixed。
键盘弹出与应用transform属性的状况在挪动端是很常见的，所以须要审慎应用position:fixed。
举荐应用flex
flex，即弹性布局，挪动端兼容性较好，可能满足大部分布局需要。当初咱们应用flex来实现h5中常见的顶部标题栏+中部滚动内容+底部导航栏的布局
页面跳转
转场动画
在vue中咱们通过vue-router来治理路由，每个路由跳转相似与在不同的页面之间进行切换，从用户敌对的角度来说，每次切换页面的时候最好增加一个转场成果。如果转场动画不辨别路由是关上新页面、还是返回之前页面咱们只须要在外应用增加一个动画成果即可；然而个别关上和返回是利用不同的动画成果的，所以咱们须要在切换路由的时候辨别路由是后退还是后退。为了辨别路由的动作，咱们在路由文件中设置meta为数字，meta示意其路由的深度，而后监听$route，依据to、from meta值的大小设置不同的跳转动画。如果利用到多种跳转动画，能够依据详情，具体情况具体利用。
vue-navigation插件还有一个重要的性能就是保留页面状态，与keep-alive类似，然而keep-alive保留状态无奈辨认路由的后退后退，而理论利用中，咱们的需要是返回页面时，心愿页面状态保留，当进入页面时心愿获取新的数据，应用vue-navigation能够很好的实现这个成果。具体应用能够查看vue-navigation有具体应用阐明与案例。另外也能够尝试vue-page-stack，两个我的项目都能实现咱们须要的成果，vue-page-stack借鉴了vue-navigation，也实现了更多的性能，并且最近也始终在更新。
PS: 这里的动画成果援用自animate.scss;
底部导航栏
之前咱们曾经实现了底部导航栏的根本款式，这里咱们再做一些阐明。当页面路由门路与router-link的路由匹配时，router-link将会被设置为激活状态，咱们能够通过设置active-class来设置门路激活时利用的类名，默认为router-link-active，而激活的类名还有一个router-link-exact-active，这个类名是由exact-active-class来设置的，同样是设置门路激活时利用的类名；active-class与exact-active-class其实是由路由的匹配形式决定的。
个别路由的匹配形式是蕴含匹配。举个例子，如果以后的门路是 /a 结尾的，那么 也会被设置 CSS 类名。依照这个规定，每个路由都会激活 ，而应用exact属性能够应用“准确匹配模式”。准确匹配只有当路由完全相同的时候才会被激活。
路由守卫
挪动端的路由守卫个别不会太简单，次要是登录权限的判断，咱们设置一个路由白名单，将所有不须要登录权限的路由放入其中；对于须要登录的路由做判断，没有登录就跳转登录页面，要求用户进行登录后在拜访，如果登录后须要返回原有路由就把指标页面的路由作为参数传递给登录页面，再在登录后进行判断，如果存在指标页面参数就跳转指标页面，没有就跳转首页。
如果你的利用波及到权限，那须要标注每个路由须要的权限，在meta中设置roles，roles是数组来保留须要的权限；从后盾的接口中获取用户领有的权限和roles进行比照就能够判断是否具备相干权限了。
通过v-model绑定数据
v-model是语法糖，它的实质是对组件事件进行监听和数据进行更新，是props和 o n 监 听 事 件 的 缩 写 ， v − m o d e l 默 认 传 递 v a l u e ， 监 听 i n p u t 事 件 。现 在 我 们 使 用 v − m o d e l 来 实 现 下 数 字 输 入 框 ， 这 个 输 入 框 只 能 输 入 数 字 ， 在 组 件 中 我 们 只 需 要 定 义 v a l u e 来 接 受 传 值 ， 然 后 在 输 入 值 满 足 我 们 输 入 条 件 （ 输 入 为 数 字 ） 的 时 候 使 用 on监听事件的缩写，v-model默认传递value，监听input事件。当初咱们应用v-model来实现下数字输入框，这个输入框只能输出数字，在组件中咱们只须要定义value来承受传值，而后在输出值满足咱们输出条件（输出为数字）的时候应用 on监听事件的缩写，v−model默认传递value，监听input事件。当初咱们应用v−model来实现下数字输入框，这个输入框只能输出数字，在组件中咱们只须要定义value来承受传值，而后在输出值满足咱们输出条件（输出为数字）的时候应用emit触发input事件。