为了账号安全,请及时绑定邮箱和手机立即绑定

vue仿微信web端聊天室|仿微信网页端vue版聊天IM系统

标签:
Html5 Vue.js vuex

vue聊天室web端实战项目|仿微信客户端聊天vue版|vue+elementUI聊天室

很早之前就有使用html5技术开发过一个web版聊天室,后来想着用vue技术捣鼓一版,后面由于各种事情,一直没能落定。最近有些空闲就使用vue开发了一个vueWechat聊天室项目

使用了Vue2.5.6+Vuex+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术开发,实现了发送消息、表情(动图),图片、视频预览,仿微信右键菜单、网页截图可直接粘贴至编辑框发送。

技术选型:

  • MVVM框架:Vue2.5.6

  • 状态管理:Vuex

  • 页面路由:Vue-router

  • iconfont图标:阿里巴巴字体图标库

  • 自定义滚动条:vue-gemini-scrollbar

  • 弹窗组件:element-ui(饿了么前端UI库)

  • 环境配置:node.js + cnpm + webpack

  • 高德地图:vue-amap

  • 图片预览:vue-photo-preview

https://img1.sycdn.imooc.com//5cc917580001914113660656.jpg

https://img1.sycdn.imooc.com//5cc9175a000194a113660656.jpg

https://img1.sycdn.imooc.com//5cc9175b000105de13660656.jpg

https://img1.sycdn.imooc.com//5cc9175b0001287b13660656.jpg

https://img1.sycdn.imooc.com//5cc9175c0001114313660656.jpg

https://img1.sycdn.imooc.com//5cc9175c00015f2913660656.jpg

https://img1.sycdn.imooc.com//5cc9175c0001282713660656.jpg

https://img1.sycdn.imooc.com//5cc9175d00015a6413660656.jpg

https://img1.sycdn.imooc.com//5cc9175d0001abb213660656.jpg

https://img1.sycdn.imooc.com//5cc9175e0001368f13660656.jpg

https://img1.sycdn.imooc.com//5cc9175f0001dd5013660656.jpg

https://img1.sycdn.imooc.com//5cc9175f0001b9fb13660656.jpg

https://img1.sycdn.imooc.com//5cc9176000015ac813660656.jpg

作者:xiaoyan2015

https://blog.csdn.net/yanxinyun1990/article/details/89735778

本文为作者原创文章,转载请附上本文链接!


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
92

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消