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
Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天的更多相关文章
- Vue2全家桶+Element搭建的PC端在线音乐网站
目录 1,前言 2,已有功能 3,使用 4,目录结构 5,页面效果 登录页 首页 排行榜 歌单列表 歌单详情 歌手列表 歌手详情 MV列表 MV详情 搜索页 播放器 1,前言 项目基于Vue2全家桶及 ...
- 【手把手教程】uniapp + vue 从0搭建仿微信App聊天应用:腾讯云TXIM即时通讯的最佳实践
基于uniapp + vue 实现仿微信App聊天应用实践,实现以下功能 1: 用户登陆 2: 聊天会话管理 3: 文本/图片/视频/定位消息收发 4: 贴图表情消息收发 5: 一对一语音视频在线通话 ...
- uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能
基于uniapp + nvue实现的uniapp仿微信App聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...
- uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息
基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...
- Android中使用ExpandableListView实现微信通讯录界面(完善仿微信APP)
之前的博文<Android中使用ExpandableListView实现好友分组>我简单介绍了使用ExpandableListView实现简单的好友分组功能,今天我们针对之前的所做的仿微信 ...
- Vue仿微信app页面跳转动画
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
- Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面
一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...
- Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
本文转载于:https://www.jianshu.com/p/32beaca25c0d 都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到 ...
- Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例
一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...
随机推荐
- [Splay模版1]
输入 第1行:1个正整数n,表示操作数量,100≤n≤200,000 第2..n+1行:可能包含下面3种规则: 1个字母'I',紧接着1个数字k,表示插入一个数字k到树中,1≤k≤1,000,000, ...
- poj1182食物链,经典带权并查集
动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人用两种 ...
- 关于WordPress搬家方法步骤的整理
最近准备更换自己的博客服务器,所以需要将原来服务器上的所有东西都搬到新的服务器.为了数据的安全,在网上找了很多的资料.现在整理一下整个搬家过程的操作步骤.下面进入正题: 1.测试环境这次我使用的示例服 ...
- 如何设置自适应当前浏览器高度的div块
嗯 就是下面这样 <!DOCTYPE html> <head> <title>adaptive this page size</title> <s ...
- 查看当前用户名称:whoami命令
没什么可讲的,就是显示当前用户名称,效果同"id -un"命令.
- Linux文件属性及如何修改文件属性
ls -al:显示文件的文件名与相关属性并列出所有文件详细的权限与属性 dr-xr-x---. 7 root root 4096 Apr3 12:31 ...
- [刷题]算法竞赛入门经典(第2版) 5-15/UVa12333 - Revenge of Fibonacci
题意:在前100000个Fibonacci(以下简称F)数字里,能否在这100000个F里找出以某些数字作为开头的F.要求找出下标最小的.没找到输出-1. 代码:(Accepted,0.250s) / ...
- Java学习笔记--链表
心在山东身在吴,飘蓬江海漫嗟吁. 他时若遂凌云志, 敢笑黄巢不丈夫. --水浒传 先上源代码,LinkedList类: private static class Node<E> { E i ...
- Linux增加磁盘操作
首先,增加磁盘分为4个大步骤:1.插上硬盘:2.分区;3.格式化4.挂载,然后分别说说以上四步的具体事项和注意内容. 1.插上硬盘(本位以虚拟机为例) 新买来一块磁盘,把磁盘插到主板上.虚拟机中操作如 ...
- smarty的学习计划(1)
1.什么事smarty? 不知道,smarty是一个使用PHP写出来的模板引擎,它提供了逻辑外在内容的分离 2.smarty优点: a.速度:成熟的模板引擎技术 b.编译型:采用smarty编写的程序 ...