gmingchen / vue3-element-plus-im

vue3-element-plus-im vue3.0 element-plus vue-cli vue-router vuex composition-api axois websocket 即时聊天 前端vue 后端java springboot netty 即时通讯 chat

im-vue主要目的在于学习 vue3 + Element-plus,功能还未很完善,目前只支持好友私聊,还未支持群聊,后续会 持续迭代更新。

后端是基于 java 的 springboot netty。

简介

im-vue 是一个管理后台基础功能框架，基于 vue3 、 element-plus 实现。内置了好友私聊功能。

• 在线预览(备用-服务器比较low，访问有点慢！)

功能模块

• 登录
• 注册
• 好友分组
• 添加好友
• 好友私聊
• 群聊

项目结构

vue3-src
├─api 接口模块
│
├─assets 静态资源模块
│  ├─icon svg图标
│  ├─images 图片
│  └─sass 样式
│ 
├─components 组件模块
│ 
├─router 动态
│ 
├─store vuex
│  ├─modules
│  │  ├─conversation 会话模块
│  │  ├─friend 好友模块
│  │  ├─message 消息模块
│  │  ├─status 侧边栏状态模块
│  │  ├─user 用户登录信息模块
│  │  └─websocket websocket模块
│  └─index 动态加载模块
│ 
├─types typescript接口
│ 
├─utils 工具模块
│  ├─constants 常量
│  ├─index 工具
│  ├─request axios二次封装
│  ├─storage 本地缓存工具
│  └─websocket websocket工具类
│
├─views 视图模块
│  ├─chat 聊天页
│  ├─login 登录页面

开发

# 克隆项目
git clone https://github.com/gmingchen/im-vue.git

# 进入项目目录
cd im-vue

# 安装依赖
npm install

# 启动服务
npm run dev   # 开发环境
npm run prod  # 正式环境
npm run test  # 测试环境

# 发布
npm run build:dev   # 开发环境
npm run build:prod  # 正式环境
npm run build:test  # 测试环境

联系方式

①群已满(500人)，可以先进②群，有空位后在加①群。若二维码失效可以加微信联系作者！

微信交流群	公众号	小程序	微信	QQ

其它开源项目

java-im

是vue3-element-plus-im即时聊天系统的 java 后端代码，springboot 基于 netty 、 shiro 实现。

vue3-element-plus-admin

是一个管理后台基础功能框架，基于 vue3 、 element-plus 和 typescript 实现。内置了 i18n 国际化，动态路由，权限验证。-[私活神器]

java-admin-base

是一个管理后台基础功能框架 base-refactoring 分支的后端代码，基于 java 的 springboot

nod-server 是一个基于 node 开发的后端服务框架，只要你会 SQL 就也可以写接口了，再也不用看后端的脸色了。