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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值