正文
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
