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

本系列将会用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移动端配置  # vue.js配置  # Vue-router结合transition实现app前进后退动画切换效果的实例  # vue.js移动端app之上拉加载以及下拉刷新实战  # vue中appear的用法  # 详解基于vue的移动web app页面缓存解决方案  # vue-router实现webApp切换页面动画效果代码  # vue实现app页面切换动画效果实例  # 巧用Vue.js+Vuex制作专门收藏微信公众号的app  # vue2手机APP项目添加开屏广告或者闪屏广告  # 的是  # 购物车  # 放在  # 不多  # 我用  # 用了  # 会用  # 你用  # 设置为  # 雪碧  # 切换到  # 有一个  # 自己的  # 加载  # 几个  # 就会  # 麻雀虽小  # 也会  # 第一个  # 也就 

相关文章： 建站之星如何助力企业快速打造五合一网站？  网站制作员失业,怎样查看自己网站的注册者？  已有域名和空间，如何快速搭建网站？  一键制作网站软件下载安装,一键自动采集网页文档制作步骤？  ppt制作免费网站有哪些,ppt模板免费下载网站？  免费ppt制作网站,有没有值得推荐的免费PPT网站？  ,柠檬视频怎样兑换vip？  PHP正则匹配日期和时间(时间戳转换)的实例代码  如何在Windows环境下新建FTP站点并设置权限？  建站之星24小时客服电话如何获取？  如何通过主机屋免费建站教程十分钟搭建网站？  5种Android数据存储方式汇总  建站之星导航菜单设置与功能模块配置全攻略  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  C#怎么使用委托和事件 C# delegate与event编程方法  如何获取开源自助建站系统免费下载链接？  建站之星导航配置指南：自助建站与SEO优化全解析  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  成都网站制作公司哪家好,四川省职工服务网是做什么用？  建站之星ASP如何实现CMS高效搭建与安全管理？  制作网站哪家好,cc、.co、.cm哪个域名更适合做网站？  建站主机CVM配置优化、SEO策略与性能提升指南  网站app免费制作软件,能免费看各大网站视频的手机app？  如何在服务器上三步完成建站并提升流量？  代刷网站制作软件,别人代刷火车票靠谱吗？  长沙做网站要多少钱,长沙国安网络怎么样？  建站主机系统SEO优化与智能配置核心关键词操作指南  建站之星如何修改网站生成路径？  如何选择香港主机高效搭建外贸独立站？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  建站为何优先选择香港服务器？  网站制作需要会哪些技术,建立一个网站要花费多少？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  智能起名网站制作软件有哪些,制作logo的软件？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  nginx修改上传文件大小限制的方法  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  历史网站制作软件,华为如何找回被删除的网站？  公司网站制作需要多少钱,找人做公司网站需要多少钱？  建站之星官网登录失败？如何快速解决？  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  建站之星多图banner生成与模板自定义指南  建站之星如何快速更换网站模板？  贸易公司网站制作流程,出口贸易网站设计怎么做？  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  北京网站制作公司哪家好一点,北京租房网站有哪些？  如何高效利用200m空间完成建站？