vue框架搭建--移動端

由於Vue官方提供了vue-cli手腳架，所以快速構建出個簡單的項目框架。在做移動端項目時，因為移動端的特性可能會用到些比較常用的插件，就在這里簡單介紹如何使用

這里只介紹怎么在項目中安裝引用和簡單的使用方法，詳細用法會附上相關鏈接或者自行百度

 

1、手淘適配方案--amfe-flexible

移動端總是少不了適配，所以無疑是最佳的選擇（GitHub傳送門）

1、安裝

cnpm install amfe-flexible --save

2、引入

main.js 文件引入 ：import 'amfe-flexible'

 

2、px轉換成rem--px2rem-loader

雖然實現的適配，但是單位是rem，用起來無疑也很讓人頭痛，如果能用px書寫，編譯成rem豈不很爽

1、安裝

cnpm install px2rem-loader --save-dev

2、配置

build文件夾下utils.js文件

//定義loader函數
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

//導入

function generateLoaders (loader, loaderOptions) {

　　const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

　.......　

}

配置完成后重啟即可

 

3、處理300ms延遲--vue-touch

移動端300ms延遲，不管在哪個項目中都是存在的（GitHub傳送門）

1、安裝

cnpm install vue-touch@next --save

2、引入

main.js 文件引入:

import VueTouch from 'vue-touch'

Vue.use(VueTouch,{name:'v-touch'})

3、使用

<v-touch tag="div" class="cover-layer" v-on:tap.prevent="pickStore(0)"></v-touch>

tag:定義使用的標簽

v-on:tap :事件綁定

 

4、UI組件--Vant

Vant是一套偏向於電商的UI組件，基於vue的UI組件庫很多，例如vux、mini-ui、cube-ui等，這里不做介紹

1、安裝

cnpm i vant -S

2、引入

官網介紹的很清晰，這里不做贅述

3、使用

 

5、滾動組件--better-scroll

移動端縱向/橫向滾動是非常平凡的使用場景，另外我們往往希望頁面在滑到頂部后用戶繼續下滑頁面不在下滑

詳細介紹：https://juejin.im/post/59b777015188257e764c716f

官網：https://ustbhuangyi.github.io/better-scroll/#/zh

1、安裝

cnpm install better-scroll --save

2、引入

在需要使用的頁面引入

import BScroll from 'better-scroll'

3、使用

參考內容：https://www.imooc.com/article/18232