资讯专栏INFORMATION COLUMN

Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天

iliyaku / 2757人阅读

摘要:前言这个项目是利用工作之余写的一个模仿微信的单页面应用,整个项目包含个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中。

前言

这个项目是利用工作之余写的一个模仿微信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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83516.html

相关文章

  • 2017-06-20 前端日报

    摘要:前端日报精选专题之跟着学节流冴羽的博客全家桶仿微信项目,支持多人在线聊天和机器人聊天腾讯前端团队社区编码的奥秘模块实现入门浅析知乎专栏前端每周清单发布新版本提升应用性能的方法中文寇可往吾亦可往用实现对决支付宝的微信企业付款到零 2017-06-20 前端日报 精选 JavaScript专题之跟着 underscore 学节流 - 冴羽的JavaScript博客 - SegmentFau...

    Galence 评论0 收藏0
  • Vue2.0全家桶仿腾讯体育APP(Web版)

    摘要:全家桶仿腾讯体育一年一度的总决赛,相信球迷用的最多的就是腾讯体育这款,刚好上手,当练手就把这个仿下来。这样刚进去的时候页面加载时间明显减短。可以包含任意异步操作。 Vue2.0全家桶仿腾讯体育APP 一年一度的NBA总决赛,相信球迷用的最多的就是腾讯体育这款APP,刚好上手Vue,当练手就把这个APP仿下来。 showImg(https://segmentfault.com/img/r...

    fnngj 评论0 收藏0
  • Vue2.0全家桶仿腾讯课堂(移动端)

    摘要:最近在学习觉得超好用,忍不住自己仿了个腾讯课堂练练手,不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于,不同在于提交的是,而不是直接变更状态。 最近在学习vue,觉得超好用,忍不住自己仿了个腾讯课堂练练手,不当之处还请大家指正(持续更新中)。 效果预览 ?在线预览:点我!!!在线预览,手机浏览或切换浏览器移动调试 ?源码地址:Github✨✨求你的小星星~...

    zorro 评论0 收藏0
  • Vue2.0全家桶仿腾讯课堂(移动端)

    摘要:最近在学习觉得超好用,忍不住自己仿了个腾讯课堂练练手,不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于,不同在于提交的是,而不是直接变更状态。 最近在学习vue,觉得超好用,忍不住自己仿了个腾讯课堂练练手,不当之处还请大家指正(持续更新中)。 效果预览 ?在线预览:点我!!!在线预览,手机浏览或切换浏览器移动调试 ?源码地址:Github✨✨求你的小星星~...

    anquan 评论0 收藏0
  • Vue2 + Nodejs + WebSocket 完成你画我猜多人在线游戏

    摘要:使用即可完成一个很有意思的在线游戏作品。你画我猜,相信大家对这个游戏都很熟悉。我用实现了你画我猜这个游戏。可以修改画笔颜色,粗细,进行撤销,恢复,清空等操作。第一个猜完后,游戏时间缩短为秒。 使用 websocket + vue2 即可完成一个很有意思的在线游戏作品。你画我猜,相信大家对这个游戏都很熟悉。 我用Vue2 + mint-ui + nodejs + websocket ...

    XanaHopper 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<