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