vue框架搭建移动端 web

由于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