继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

xiaoyan2015
关注TA
已关注
手记 45
粉丝 30
获赞 106

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://img3.mukewang.com/5cc917580001914113660656.jpg

https://img.mukewang.com/5cc9175a000194a113660656.jpg

https://img1.mukewang.com/5cc9175b000105de13660656.jpg

https://img4.mukewang.com/5cc9175b0001287b13660656.jpg

https://img2.mukewang.com/5cc9175c0001114313660656.jpg

https://img2.mukewang.com/5cc9175c00015f2913660656.jpg

https://img1.mukewang.com/5cc9175c0001282713660656.jpg

https://img3.mukewang.com/5cc9175d00015a6413660656.jpg

https://img4.mukewang.com/5cc9175d0001abb213660656.jpg

https://img1.mukewang.com/5cc9175e0001368f13660656.jpg

https://img.mukewang.com/5cc9175f0001dd5013660656.jpg

https://img3.mukewang.com/5cc9175f0001b9fb13660656.jpg

https://img3.mukewang.com/5cc9176000015ac813660656.jpg

作者:xiaoyan2015

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

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


打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP

热门评论

最新版vite5+vue3+elementPlus网页版聊天室。

https://gf.bilibili.com/item/detail/1106226011

您这个具体如何使用呢,能看下源码吗

大佬 能分享一下吗 

查看全部评论