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
}
} //导入
配置完成后重启即可
3、处理300ms延迟--vue-touch
移动端300ms延迟,不管在哪个项目中都是存在的(GitHub传送门)
1、安装
cnpm install vue-touch@next --save
2、引入
main.js 文件引入:
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、引入
在需要使用的页面引入
最新文章
- Atitit 研发团队建设----福利法案--非物质福利与物质福利法案
- [JavaEE]Get请求URI中带的中文参数在服务端乱码问题的解决方法
- RSA非对称加密
- 寒假 OC-代理,类目,内存,协议,延展,数组,字典,集合
- openstack实例热迁移
- selenium中定位iframe框
- linux命令之mv
- uva 10026 Shoemaker&#39;s Problem(排序)
- sqlserver 只有函数和扩展存储过程才能从函数内部执行
- Sipdroid实现SIP(三): 消息接收处理
- vue swiper中的大坑
- react-redux-数据流
- Maya cmds pymel 快速选择hard edges(硬边)
- mfc调用cmd执行完保留黑框
- 【CF717G】Underfail 费用流
- 【JavaScript】read_line()、print()实现输入输出
- 数据库简单练习 建表+select
- Android的Button按钮,ACTION_UP事件不触发解决方案
- JavaScript Boolean Object 逻辑
- Publishing to IIS 发布到IIS
热门文章
- SpringBoot系列:一、SpringBoot搭建
- Linux_VMWare12 Install RHEL7
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_08 转换流_2_编码引出的问题_FileReader读取GBK格式文件
- 测开之路九十五:css进阶之光标和溢出内容处理
- 测开之路九十一:css常用的选择器
- C#线程中安全访问控件(重用委托,避免繁复的delegate,Invoke)总结
- 微信小程序 scroll-View 动态定位之scroll-into-view
- ssm项目的创建思路
- 工具 - VNC
- 前端003/【React + Mobx + NornJ】开发模式