查看: 846|回复: 1

vue3.0 web版聊天实战:vue3+element-plus仿QQ/微信界面模板

[复制链接]

该用户从未签到

23

主题

27

帖子

141

积分

注册会员

Rank: 2

积分
141
QQ
发表于 2021-1-25 12:10:08 | 显示全部楼层 |阅读模式
本帖最后由 xiaoyan2015 于 2021-1-25 12:17 编辑

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

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

p2.gif
p2-2.gif

项目目录
360截图20210118104205023.png

002360截图20210117103920076.png

003360截图20210117104257727.png

004360截图20210117104128750.png

005360截图20210117104208984.png

008360截图20210117104456093.png

009360截图20210117104527268.png

010360截图20210117104815309.png

011360截图20210117104836285.png

015360截图20210117105442822.png

019360截图20210117105915222.png

021360截图20210117110403269.png

023360截图20210117110553047.png

026360截图20210117111039022.png

028360截图20210117111248862.png

029360截图20210117111338190.png

034360截图20210117111837037.png

035360截图20210117111928494.png

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

p1.gif

之前有过相关的分享,这里就不详细的介绍了。大家感兴趣可以去看看下面两篇文章。
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.       <SideBar v-if="!route.meta.hideSideBar" class="nt__sidebar flexbox flex-col" />

  8.       <!-- 中间栏 -->
  9.       <Middle v-show="!route.meta.hideMiddle" />

  10.       <!-- 主内容区 -->
  11.       <router-view class="nt__mainbox flex1 flexbox flex-col"></router-view>
  12.     </div>
  13.   </div>
  14. </div>
复制代码
好了,以上就是vue3+elementPlus开发网页端聊天的一些分享,希望大家能喜欢~~
后续还会分享一些vue3实战案例,感谢各位小伙伴们的支持!!


回复

使用道具 举报

  • TA的每日心情
    奋斗
    2021-2-2 11:25
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    0

    主题

    14

    帖子

    46

    积分

    新手上路

    Rank: 1

    积分
    46
    发表于 2021-1-26 15:29:46 | 显示全部楼层
    楼主很棒!~~~~~~~~~~~~感谢分享
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2022-1-23 21:06 , Processed in 0.091686 second(s), 31 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表