项目简介Vue3WebChat是基于vue3全家桶技术仿QQ和微信界面桌面聊天开发项目。实现发送图文消息、预览图片/视频、查看链接、图片拖拽、红包/朋友圈等功能使用技术框架:vue3.x+vue-router@4+vuex4UI组件库:element-plus(饿了么桌面vue3组件库)弹窗组件:v3layer(基于vue3自定义弹窗组件)滚动条美化:v3scroll(基于vue3自定义滚动条组件)字体图标:上面阿里iconfont图标是vue3实现的QQ皮肤聊天界面。下面也支持微信皮肤。项目目录的目录结构比较清晰,一目了然。vue3.x自定义滚动条组件为了保持项目整体效果的一致性,项目中所有页面均使用vue3.0自定义滚动条替代原生滚动条。v3scroll是一个轻量级的vue3自定义模拟系统滚动条组件。支持监控DOM大小动态更新滚动条。https://segmentfault.com/a/11...vue3.x自定义对话框组件本项目专门开发了一个Vue3自定义弹窗组件。v3layer是一个基于vue3的PC网页版弹窗组件。超过30+参数配置。支持拖放、缩放、最大化、全局、自定义顶层等功能。https://segmentfault.com/a/11...main.jsimportconfiguration/***Vue3.0入口配置*/import{createApp}from'vue'importAppfrom'./App.vue'//引入vuex和地址路由importstorefrom'./store'importrouterfrom'./router'//引入公共组件importPluginsfrom'./plugins'/*引入公共样式*/import'@assets/fonts/iconfont.css'import'@assets/css/reset.css'import'@assets/css/layout.css'constapp=createApp(App)app.use(store)app.use(router)app.use(Plugins)app.mount('#app')App.vue主模板配置为QQ和微信皮肤写了两种不同的样式。
