vue3+vite5网页聊天模板|vite5.x+element-plus仿微信

vite5-webchat使用最新前端技术vite5+vue3+vue-router+pinia+sass+element-plus搭建网页端聊天系统。实现了聊天、通讯录、朋友圈、短视频、我的等功能模块。支持收缩侧边栏、背景壁纸换肤、锁屏、最大化等功能。

vue3-vitechat仿微信网页版聊天系统实例

vite-wechat使用vite5.x构建工具搭建项目模板，采用vue3 setup语法开发。

技术栈

• 开发工具：Vscode
• 技术框架：Vite5.2+Vue3.4+vue-router4.3+Pinia2
• UI组件库：element-plus^2.7.5 (饿了么网页端vue3组件库)
• 状态管理：pinia^2.1.7
• 地图插件：@amap/amap-jsapi-loader(高德地图组件)
• 视频滑动：swiper^11.1.4
• 图文编辑器：wangeditor^4.7.15(笔记/朋友圈文本编辑器)
• 样式编译：sass^1.77.4
• 构建工具：vite^5.2.0

前段时间有分享一篇flutter3.x桌面端仿微信EXE聊天，感兴趣的可以去看看。
https://segmentfault.com/a/1190000044675519

项目结构

vite-chat聊天已经同步到我的最新原创作品集，有需要的可以去看看。
https://gf.bilibili.com/item/detail/1106226011

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

// 引入组件库  
import ElementPlus from 'element-plus'  
import 'element-plus/dist/index.css'  
import VEPlus from 've-plus'  
import 've-plus/dist/ve-plus.css'  

// 引入路由/状态管理  
import Router from './router'  
import Pinia from './pinia'  

const app = createApp(App)  

app  
.use(ElementPlus)  
.use(VEPlus)  
.use(Router)  
.use(Pinia)  
.mount('#app')

项目布局模板

<template>  
  <div class="vu__container" :style="{'--themeSkin': appstate.config.skin}">  
    <div class="vu__layout">  
      <div class="vu__layout-body">  
        <!-- 菜单栏 -->  
        <slot v-if="!route?.meta?.hideMenuBar" name="menubar">  
          <MenuBar />  
        </slot>  

        <!-- 侧边栏 -->  
        <div v-if="route?.meta?.showSideBar" class="vu__layout-sidebar" :class="{'hidden': appstate.config.collapsed}">  
          <aside class="vu__layout-sidebar__body flexbox flex-col">  
            <slot name="sidebar">  
              <SideBar />  
            </slot>  

            <!-- 折叠按钮 -->  
            <Collapse />  
          </aside>  
        </div>  

        <!-- 主内容区 -->  
        <div class="vu__layout-main flex1 flexbox flex-col">  
          <Winbtn v-if="!route?.meta?.hideWinBar" />  
          <router-view v-slot="{ Component, route }">  
            <keep-alive>  
              <component :is="Component" :key="route.path" />  
            </keep-alive>  
          </router-view>  
        </div>  
      </div>  
    </div>  
  </div>  
</template>

vue3-chat短视频模块

<!-- 短视频模块 -->  
<div class="vu__video-container">  
    <!-- tabs操作栏 -->  
    <div class="vu__video-tabswrap flexbox">  
        <el-tabs v-model="activeName" class="vu__video-tabs">  
            <el-tab-pane label="关注" name="attention" />  
            <el-tab-pane label="推荐" name="recommend" />  
        </el-tabs>  
    </div>  
    <swiper-container  
        class="vu__swiper"  
        direction="vertical"  
        :speed="150"  
        :grabCursor="true"  
        :mousewheel="{invert: true}"  
        @swiperslidechange="onSlideChange"  
    >  
        <swiper-slide v-for="(item, index) in videoList" :key="index">  
            <!-- 视频层 -->  
            <video  
                class="vu__player"  
                :id="'' + index"  
                :src="item.src"  
                :poster="item.poster"  
                loop  
                preload="auto"  
                :autoplay="index == currentVideo"  
                webkit-playsinline="true"   
                x5-video-player-type="h5-page"  
                x5-video-player-fullscreen="true"  
                playsinline  
                @click="handleVideoClicked"  
            >  
            </video>  
            <div v-if="!isPlaying" class="vu__player-btn" @click="handleVideoClicked"></div>  

            <!-- 右侧操作栏 -->  
            <div class="vu__video-toolbar">  
                ...  
            </div>  

            <!-- 底部信息区域 -->  
            <div class="vu__video-footinfo flexbox flex-col">  
                <div class="name">@{{item.author}}</div>  
                <div class="content">{{item.desc}}</div>  
            </div>  
        </swiper-slide>  
    </swiper-container>  
    <!-- ///底部进度条 -->  
    <el-slider class="vu__video-progressbar" v-model="progressBar" @input="handleSlider" @change="handlePlay" />  
    <div v-if="isDraging" class="vu__video-duration">{{videoTime}} / {{videoDuration}}</div>  
</div>

vue3聊天功能

<template>  
  <!-- 顶部导航 -->  
  ...  

  <!-- 内容区 -->  
  <div class="vu__layout-main__body">  
    <Scrollbar ref="scrollRef" autohide gap="2">  
      <!-- 渲染聊天内容 -->  
      <div class="vu__chatview" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">  
        ...  
      </div>  
    </Scrollbar>  
  </div>  

  <!-- 底部操作栏 -->  
  <div class="vu__footview">  
    <div class="vu__toolbar flexbox">  
      ...  
    </div>  
    <div class="vu__editor">  
      <Editor ref="editorRef" v-model="editorValue" @paste="handleEditorPaste" />  
    </div>  
    <div class="vu__submit">  
      <button @click="handleSubmit">发送(S)</button>  
    </div>  
  </div>  

  ...  
</template>

综上就是vue3+vite5实战开发仿微信聊天系统一些知识分享，希望对大家有些帮助~

作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000044984067
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。