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

2022-11-26 0 371

序言

那个工程项目是借助组织工作之余写的两个仿效QQapp的单网页应用领域,整座工程项目包涵27个网页,牵涉动态聊天室,机器闲聊,纪念册,贴文之类,先期网页却是合作开发中。写那个工程项目主要就目地是练和熟识vue和vuex的相互配合采用,借助socket.io同时实现动态闲聊。

控制技术栈

vue2+vuerouter+webpack+vuex+sass+svg画法+es6/7

源代码门牌号

源代码门牌号:https://github.com/bailichen/vue-weixin

工程项目运转

git clone https://github.com/bailichen/vue-weixin.git

cd vueweixin

npm install

npm run dev (访问本地,运转后访问 http://localhost:8882)

效果演示

工程项目演示请点击这里:http://cangdu.org:8003/dialogue(请用chrome手机模式预览)

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

说明

本工程项目主要就用于熟识vue2+vuex的用法

如有问题请直接在Issues中提出,或加qq:812571880

如果觉得对您学习vue有点点帮助,请右上角star一下吧 ^_^

目标功能

QQ

通讯录

发现

设置

新消息提醒

勿扰模式

闲聊

widows QQ已登录

搜索页

对话页

对话功能

单人机器智能对话页

聊天室

贴文

贴文点赞、评论

个人中心

详细资料

更多

个人相册

更多

收藏

我的钱包

购物

设置

登录

网页部分截图

单人闲聊

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

聊天室

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

贴文

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

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

工程项目布局

├── README.md                                    // webpack配置文件

├── build                                        // 工程项目打包路径

├── config                                       // 上线工程项目文件,放在服务器即可正常访问

└──index.js

├── favicon.ico

├── index.html

├──package.json

├── printscreen

├── src                                          // 源代码目录

├──App.vue                                  // 网页入口文件

├──components// 公共组件

├── findandMe

└── findandMe.vue                    // 发现和我共同的模块的列表

├── footer

└── foot.vue                         // 底部QQ导航

└── 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                     // QQ首页(对话列表页)

├── 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              // 关于QQ

├── 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

├── mutationtypes.js                  // 定义常量muations名

└── mutation.js                        // 配置根mutations

└── tree.md

36directories,133 files

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务