收藏本站 [收不到邮件][导航]

架构师,致力于程序员计算机编程知识交流的一个平台!

架构师_程序员_码农网»架构师 › 前端设计&Web › 前端框架 › vue聊天实例|仿微信聊天界面IM

发新帖

查看: 5912|回复: 1

[Vue] vue聊天实例|仿微信聊天界面IM

发表于 2019-7-20 11:18:25 | 显示全部楼层 |阅读模式

本帖最后由 xiaoyan2015 于 2019-7-20 11:19 编辑

项目简介
基于Vue2.0+Vuex+vue-router+webpack2.0+es6+node+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom，实现了微信聊天下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。

技术选型

MVVM框架：Vue.js 2.0
状态管理：Vuex
页面路由：Vue-router
弹窗插件：wcPop
打包工具：webpack 2.0
环境配置：node.js + cnpm
图片插件：vue-photo-preview

010360截图20190404103158010.png

package.json依赖安装配置：

登录可见。

App入口组件模板：

登录可见。

001360截图20190404102414972.png

002360截图20190404102455835.png

004360截图20190404102549202.png

006360截图20190404102712306.png

007360截图20190404102726897.png

008360截图20190404102741137.png

013360截图20190404103443283.png

014360截图20190404103510337.png

015360截图20190404103635467.png

017360截图20190404103734242.png

018360截图20190404103753065.png

主页面main.js配置及外部组件引入：

登录可见。

vue路由拦截，登录、注册拦截验证：

登录可见。

登录可见。

上一篇：python用pdfkit怎么转换那种登陆后的页面啊？
下一篇：《世界上最神奇的24堂课》(美)查尔斯哈奈尔

码农网，只发表在实践过程中,遇到的技术难题，不误导他人。

回复

发表于 2019-8-16 11:26:09 | 显示全部楼层

能不能提供下源码学习下

码农网，只发表在实践过程中,遇到的技术难题，不误导他人。

回复支持反对

发新帖

免责声明：
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。
Mail To:help@itsvse.com

|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-4-19 17:35

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表