Swiper中文论坛

标题: vue3.0 web版聊天实战：vue3+element-plus仿QQ/微信界面模板 [打印本页]

---

作者: xiaoyan2015    时间: 2021-1-25 12:10
标题: vue3.0 web版聊天实战：vue3+element-plus仿QQ/微信界面模板


项目简介
Vue3-Webchat项目 基于vue3.0.5+vuex4+element-plus+v3layer+v3scroll等技术开发构建的一款PC版仿微信界面聊天项目。


运用技术

• 编辑器：VScode
• MVVM框架：Vue3.0.5
• 状态管理：Vuex4.x
• 页面路由：Vue-Router@4
• UI组件库：element-plus (桌面端vue3组件库)
• 弹窗组件：v3layer（基于vue3自定义弹窗组件）
• 美化滚动条：v3scroll（基于vue3自定义滚动条组件）
  

项目目录




































vue3自定义弹窗+滚动条组件
为了配合项目整体效果一致性，所有页面弹窗及滚动条都是采用vue3自定义组件来实现。




之前有过相关的分享，这里就不详细的介绍了。大家感兴趣可以去看看下面两篇文章。
vue3自定义全局pc端弹窗组件
vue3自定义轻量级pc端滚动条组件

主模板布局

1. <div :class="['vui__wrapper', store.state.isWinMaximize&&'maximize']">
   
2.   <div class="vui__board flexbox">
   
3.     <div class="flex1 flexbox">
   
4.       <!-- 右上角按钮 -->
   
5.       <WinBar v-if="!route.meta.hideWinBar" />
   
6. 
   
7.       <!-- 侧边栏 -->
   
8.       <SideBar v-if="!route.meta.hideSideBar" class="nt__sidebar flexbox flex-col" />
   
9. 
   
10.       <!-- 中间栏 -->
    
11.       <Middle v-show="!route.meta.hideMiddle" />
    
12. 
    
13.       <!-- 主内容区 -->
    
14.       <router-view class="nt__mainbox flex1 flexbox flex-col"></router-view>
    
15.     </div>
    
16.   </div>
    
17. </div>

复制代码

好了，以上就是vue3+elementPlus开发网页端聊天的一些分享，希望大家能喜欢~~
后续还会分享一些vue3实战案例，感谢各位小伙伴们的支持！！

---

作者: melo6666    时间: 2021-1-26 15:29
楼主很棒!~~~~~~~~~~~~感谢分享

---

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)

Powered by Discuz! X3.2