Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例

vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例。

运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊天实例项目。实现发送表情图文消息、图片/视频预览、链接查看、粘贴/拖拽发送图片、红包/朋友圈等功能。

技术栈

• 编码/技术：VScode + Vue3 + Vuex4 + VueRouter@4
• UI组件库：ElementPlus (饿了么桌面端vue3组件库)
• 对话框组件：V3Layer（基于vue3.x自定义对话框组件）
• 虚拟滚动条：V3Scroll（基于vue3.x自定义模拟滚动条组件）
• 字体图标：阿里iconfont图标

目录结构

既然到了vue3时代，就全部使用vue3语法实现所有页面的编码。

vue3全局弹窗组件

为了达到项目整体效果的一致性，所有弹窗场景都是采用vue3自定义组件实现。

v3layer 一款多功能Vue3自定义全局弹窗组件。支持组件式+函数式调用，超过30+自定义参数配置。

https://blog.csdn.net/yanxinyun1990/article/details/112131592

vue3虚拟滚动条组件

v3scroll 一款基于vue3开发的轻量级替代原生滚动条组件。

https://blog.csdn.net/yanxinyun1990/article/details/112300429

项目中的所有页面都有应用到，功能效果有些类似el-scrollbar组件。

这个是在原先的vue2版本中衍生而来，大家如果对vue2自定义滚动条感兴趣，可以去看看这篇分享。

https://blog.csdn.net/yanxinyun1990/article/details/110394287

App.vue主页面模板

整体布局分为右上角按钮、侧边栏、中间栏、主容器几个模块。

主入口main.js配置

主要是引入一些公共组件/样式、vuex及地址路由。

/**
 * Vue3.0入口配置
 */

import { createApp } from 'vue'
import App from './App.vue'

// 引入vuex和地址路由
import store from './store'
import router from './router'

// 引入公共组件
import Plugins from './plugins'

/* 引入公共样式 */
import '@assets/fonts/iconfont.css'
import '@assets/css/reset.css'
import '@assets/css/layout.css'

const app = createApp(App)

app.use(store)
app.use(router)
app.use(Plugins)

app.mount('#app')

vue3表单验证+60s倒计时

vue3聊天页面

聊天页面消息滚动区使用到了v3scroll组件，底部编辑器则是采用分离公共组件。

editor编辑器支持图文混排，光标处插入内容，多行文本，支持输入网址检测，粘贴截图发送等功能。

为大家提供了vue2.x和vue3.x两种实现方式。

/**
 * @Desc     vue3实现富文本编辑器
 * @Time     andy by 2021-01
 * @About    Q：282310962  wx：xy190310
 */

end，基于vue3.0+element-plus实现仿QQ/微信界面聊天实战项目就分享到这里。

最后附上两个实例项目

nuxt.js移动端app仿微信界面|Nuxt+Vant聊天室

electron-vue客户端聊天实例|Electron仿微信