Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天
栏目: JavaScript · 发布时间: 7年前
内容简介:Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天
前言
这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中。写这个项目主要目的是练习和熟悉vue和vuex的配合使用,利用socket.io实现实时聊天。
技术栈
vue2+vue-router+webpack+vuex+sass+svg构图+es6/7
源码地址
源码地址: https://github.com/bailichen/vue-weixin
项目运行
git clone https://github.com/bailichen/vue-weixin.git cd vue-weixin npm install npm run dev (访问本地,运行后访问 http://localhost:8882)
效果演示
项目演示请点击这里 (请用chrome手机模式预览)
移动端扫描下方二维码
说明
本项目主要用于熟悉vue2+vuex的用法
如有问题请直接在Issues中提出,或加qq:812571880
如果觉得对您学习vue有点点帮助,请右上角star一下吧 ^_^
目标功能
-
[x] 微信
-
[x] 通讯录
-
[x] 发现
-
[x] 我
-
[x] 设置
-
[x] 新消息提醒
-
[x] 勿扰模式
-
[x] 聊天
-
[x] widows 微信已登录
-
[x] 搜索页
-
[x] 对话页
-
[x] 对话功能
-
[x] 单人机器人智能对话页
-
[x] 群聊
-
[x] 朋友圈
-
[x] 朋友圈点赞、评论
-
[x] 个人中心
-
[x] 详细资料
-
[x] 更多
-
[x] 个人相册
-
[x] 更多
-
[x] 收藏
-
[x] 我的钱包
-
[x] 购物
-
[x] 设置
-
[x] 登录
页面部分截图
单人聊天
群聊
朋友圈
项目布局
├── README.md // webpack配置文件 ├── build // 项目打包路径 ├── config // 上线项目文件,放在服务器即可正常访问 │ └── index.js ├── favicon.ico ├── index.html ├── package.json ├── printscreen ├── src // 源码目录 │ ├── App.vue // 页面入口文件 │ ├── components // 公共组件 │ │ ├── findandMe │ │ │ └── findandMe.vue // 发现和我共同的模块的列表 │ │ ├── footer │ │ │ └── foot.vue // 底部微信导航 │ │ └── header │ │ └── head.vue // 头部公共组件 │ ├── config // 基本配置 │ │ ├── env.js // 环境切换配置 │ │ ├── fetch.js // 获取数据 │ │ ├── iscroll.js │ │ ├── mUtils.js // 工具 │ │ ├── rem.js // px转换rem │ │ ├── swiper.min.js // 轮播图控件 │ │ └── uploadPreview.js // 上传图片控件 │ ├── frames │ │ ├── addressbook │ │ │ ├── addressbook.vue // 通讯录 │ │ │ └── details │ │ │ ├── details.vue // 详细资料 │ │ │ └── more │ │ │ └── more.vue // 更多 │ │ ├── computer │ │ │ └── computer.vue // pc端登录 │ │ ├── conversation │ │ │ ├── chatmessage │ │ │ │ ├── chatmessage.vue // 单人聊天信息 │ │ │ │ └── groupchatmessage.vue // 群聊聊天信息 │ │ │ ├── groupchat.vue // 群聊 │ │ │ └── singlechat.vue // 单人对话 │ │ ├── dialogue │ │ │ └── dialogue.vue // 微信首页(对话列表页) │ │ ├── find │ │ │ ├── find.vue // 发现 │ │ │ ├── friendcircle │ │ │ │ └── friendcircle.vue // 朋友圈 │ │ │ └── miniapps │ │ │ └── miniapps.vue // 小程序子页面 │ │ ├── me │ │ │ ├── cardbag │ │ │ │ └── cardbag.vue // 卡包 │ │ │ ├── collect │ │ │ │ └── collect.vue // 我的收藏 │ │ │ ├── me.vue │ │ │ ├── personaldetails │ │ │ │ └── personaldetails.vue // 个人信息 │ │ │ ├── photoalbum │ │ │ │ └── photoalbum.vue // 我的相册 │ │ │ ├── settings │ │ │ │ ├── detailset │ │ │ │ │ ├── aboutwc.vue // 关于微信 │ │ │ │ │ ├── chat.vue // 聊天 │ │ │ │ │ ├── currency.vue // 通用 │ │ │ │ │ ├── disturbance.vue // 勿扰模式 │ │ │ │ │ ├── help.vue // 帮助与反馈 │ │ │ │ │ ├── login.vue // 登录 │ │ │ │ │ ├── newmessage.vue // 新消息提醒 │ │ │ │ │ └── privacy.vue // 隐私 │ │ │ │ └── settings.vue // 设置 │ │ │ └── wallet │ │ │ └── wallet.vue // 我的钱包 │ │ ├── search │ │ │ └── search.vue // 搜索 │ │ └── transfer │ │ └── transfer.vue │ ├── images │ ├── main.js // 程序入口文件,加载各种公共组件 │ ├── router │ │ └── router.js // 所有页面路由控制中心 │ ├── service │ │ ├── data │ │ │ ├── album.js // 个人相册 │ │ │ ├── burse.js // 钱包数据 │ │ │ ├── chatmore.js │ │ │ ├── collect.js // 我的收藏 │ │ │ ├── contacts.js // 联系人列表数据 │ │ │ ├── dialoglist.js // 对话列表 │ │ │ ├── friendcircle.js // 朋友圈数据 │ │ │ ├── groupchat.js // 群聊数据 │ │ │ ├── login.js // 个人用户信息 │ │ │ ├── search.js // 搜索的分类 │ │ │ └── userword.js │ │ └── getData.js // 数据交互统一调配 │ ├── style │ │ ├── public.scss // 公共样式 │ │ └── swiper.min.css │ └── vuex // vuex的状态管理 │ ├── action.js // 配置根actions │ ├── index.js // 引用vuex,创建store │ ├── mutation-types.js // 定义常量muations名 │ └── mutation.js // 配置根mutations └── tree.md 36 directories, 133 files
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- workerman结合laravel开发在线聊天应用
- Swoole实验室:4-使用Swoole实现在线聊天
- Swoole跟thinkphp5结合开发WebSocket在线聊天通讯系统教程
- SWOOLE开发实时聊天系统(十)用户断开聊天
- 聊天私服 Akaxin 0.5.4 发布,优化聊天、注册逻辑
- Netty网络聊天(一) 聊天室的实战(最易懂)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C语言名题精选百则技巧篇
冼镜光 / 机械工业出版社 / 2005-7 / 44.00元
《C语言名题精选百则》(技巧篇)收集了100则C语言程序设计题,共分9类。第一类比较简单,主要希望读者了解到《C语言名题精选百则》(技巧篇)的题目、解法与其他书籍之间的差异;第二至六类分别是关于数字、组合数学或离散数学、查找、排序、字符串等方面的题目;第七类列出了一些不太容易归类的题目,如Buffon丢针问题、Dijkstra的三色旗问题等;第八类则收录了一些有趣的、娱乐性的题目,如魔方阵等;第九......一起来看看 《C语言名题精选百则技巧篇》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
HSV CMYK 转换工具
HSV CMYK互换工具