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

时间 2019-12-06

标签 vue.js vue 移动 app 实战初始配置栏目 JavaScript 繁體版

原文原文链接

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

初始工做：

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

下载好文件后，npm run dev
启动服务你就会看到熟悉的hello vue。因为咱们作的是移动端的页面，因此把chrome切换到手机模式（打开开发工具，ctrl+shift+m或者点左上角那个手机）html

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

这里简单介绍一下如何计算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；)java

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

假如你用的sublime编辑器,能够到https://github.com/flashlizi/cssrem 下载一个插件，写起来更方便；webpack

字体的处理：

字体方面咱们仍然用px来写，不过须要针对不一样的缩放比例写不用的大小，好比安卓下，字体大小为14px,那么iphone6下大小应为28，Iphone6s应为42px。flexible.js会根据屏幕缩放比给html添加data-dpr属性，所以能够经过scss编写mixin来处理字体git

@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);github

图片的处理:

一般为了适应retain和非retain屏幕，咱们会准备不一样的图片大小，也就是2x和3x图，个人作法是[data-dpr="3"]下使用3x图，其余状况统一使用2X图。web

在为了方便，编写一个mixin来处理：（假设放在2x文件夹和3x文件夹下）chrome

@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路由下，因此到了购物车页面导航也就不存在了，这样基本的配置就差很少完成了。