本系列將會用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路由下，所以到了購物車頁面導航也就不存在了，這樣基本的配置就差不多完成了。