前言

这个项目是利用工作之余写的一个模仿微信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 项目,支持多人在线聊天和机器人聊天的更多相关文章

  1. Vue2全家桶+Element搭建的PC端在线音乐网站

    目录 1,前言 2,已有功能 3,使用 4,目录结构 5,页面效果 登录页 首页 排行榜 歌单列表 歌单详情 歌手列表 歌手详情 MV列表 MV详情 搜索页 播放器 1,前言 项目基于Vue2全家桶及 ...

  2. 【手把手教程】uniapp + vue 从0搭建仿微信App聊天应用:腾讯云TXIM即时通讯的最佳实践

    基于uniapp + vue 实现仿微信App聊天应用实践,实现以下功能 1: 用户登陆 2: 聊天会话管理 3: 文本/图片/视频/定位消息收发 4: 贴图表情消息收发 5: 一对一语音视频在线通话 ...

  3. uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能

    基于uniapp + nvue实现的uniapp仿微信App聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...

  4. uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息

    基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...

  5. Android中使用ExpandableListView实现微信通讯录界面(完善仿微信APP)

    之前的博文<Android中使用ExpandableListView实现好友分组>我简单介绍了使用ExpandableListView实现简单的好友分组功能,今天我们针对之前的所做的仿微信 ...

  6. Vue仿微信app页面跳转动画

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...

  7. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

  8. Vue2全家桶之一:vue-cli(vue脚手架)超详细教程

    本文转载于:https://www.jianshu.com/p/32beaca25c0d   都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到 ...

  9. Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例

    一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...

随机推荐

  1. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  2. ESXi5.0误删除虚拟机还有办法恢复吗?答案是可以!

    [数据恢复故障描述]故障的虚拟化系统是 ESXi5.0,连接了多个LUN,其中一个1T的LUN上跑有7 台虚拟机,均为Windows Server 2003,管理员因为其它原因误删除了一台虚拟机,此台 ...

  3. arcgis属性选取like用法

    查询对象为ArcInfo coverage,shapefile, INFO table,dBASE table,ArcSDE data,ArcIMS 要素类,或者 ArcIMS image servi ...

  4. realmock 前后端分离方案

    realmock 前后端分离方案 express + randomjson 模拟后端服务,前端服务器(比如webpack, nigix等)将请求代理到该服务器地址即可 github地址:https:/ ...

  5. 更快的理解js中循环嵌套

    [循环控制语句] break语句:终止本层循环,继续执行循环后面的语句:(当循环有多层时,break只会跳出一层循环) continue语句:跳过本次循环,继续执行下次循环: (对于for循环,con ...

  6. 理解C++ lvalue与rvalue

    一个众所周知的危险错误是,函数返回了一个局部变量的指针或引用.一旦函数栈被销毁,这个指针就成为了野指针,导致未定义行为.而左值(lvalue)和右值(rvalue)的概念,本质上,是理解“程序员可以放 ...

  7. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  8. 开涛spring3(3.1) - DI的配置使用

    3.1.1  依赖和依赖注入 传统应用程序设计中所说的依赖一般指“类之间的关系”,那先让我们复习一下类之间的关系: 泛化:表示类与类之间的继承关系.接口与接口之间的继承关系: 实现:表示类对接口的实现 ...

  9. Java反射机制详解(3) -java的反射和代理实现IOC模式 模拟spring

    IOC(Inverse of Control) 可翻译为“控制反转”,但大多数人都习惯将它称为“依赖注入”.在Spring中,通过IOC可以将实现类.参数信息等配置在其对应的配置文件中,那么当 需要更 ...

  10. laravel实现多数据库连接配置

    只需三步,便可实现. 第一步,在.env文件中配置 DB_HOST=localhost DB_DATABASE=test DB_USERNAME=root DB_PASSWORD=root DB_HO ...