Vite7网页版聊天|Vue3.5+Pinia3+ElementPlus仿微信网页端web聊天系统

最新研发vite7.1+vue3.5+element-plus仿微信网页版聊天vite7-webchat。

vite-vue3-webchat 基于Vite7+Vue3+Pinia3+elementPlus实战仿微信界面网页端聊天模板。实现了聊天、联系人、收藏、朋友圈、小视频、我的 等模块。支持消息+emo混排、光标位置插入gif动图、图片/视频预览、红包等功能。

使用技术

• 编辑器：Vscode
• 技术框架：vite7.1+vue3.5+vue-router4.5+pinia3
• UI组件库：element-plus^2.11.1 (饿了么网页端vue3组件库)
• 状态管理：pinia^3.0.3
• 地图插件：@amap/amap-jsapi-loader(高德地图组件)
• 视频滑动：swiper^11.2.10
• 富文本编辑器：wangeditor^4.7.15
• 样式编译：sass^1.91.0
• 构建工具：vite^7.1.2

项目框架结构

vite-vue3-wechat项目使用 vite7 搭建项目模板，采用 vue3 setup 语法糖编码。

vite7-webchat聊天项目已经更新到我的原创作品集，感谢支持！

vite7+vue3.5+pinia3+element-plus仿微信网页版聊天

入口文件main.js

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')

通用布局模板

项目整体布局结构分为左侧菜单栏+侧边栏+右侧主内容区三部分。

<script setup>
  import { useRoute } from 'vue-router'
  import { appState } from '@/pinia/modules/app'

  import MenuBar from './components/menubar/index.vue'
  import SideBar from './components/sidebar/index.vue'
  import Winbtn from './components/winbtn.vue'

  const route = useRoute()
  const appstate = appState()
</script>

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

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

vue-router@4路由管理

import { createRouter, createWebHashHistory } from 'vue-router'
import { authState } from '@/pinia/modules/auth'

import Layout from '@/layouts/index.vue'

// 批量导入路由
const modules = import.meta.glob('./modules/*.js', { eager: true })
console.log(modules)
const patchRouters = Object.keys(modules).map(key => modules[key].default).flat()
console.log(patchRouters)

/**
 * meta配置
 * @param meta.requireAuth 需登录验证页面
 * @param meta.hideWinBar 隐藏右上角按钮组
 * @param meta.hideMenuBar 隐藏菜单栏
 * @param meta.showSideBar 显示侧边栏
 * @param meta.canGoBack 是否可回退上一页
 */
const routes = [
  ...patchRouters,
  // 错误模块
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    component: Layout,
    meta: {
      title: '404error',
      hideMenuBar: true,
      hideWinBar: true,
    },
    children: [
      {
        path: '404',
        component: () => import('@/views/error/404.vue'),
      }
    ]
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

// 全局路由钩子拦截
router.beforeEach((to, from) => {
  const authstate = authState()
  if(to?.meta?.requireAuth && !authstate.authorization) {
    return {
      path: '/login'
    }
  }
})

router.afterEach((to, from) => {
  // 阻止浏览器回退
  if(to?.meta?.canGoBack == false && from.path != null) {
    history.pushState(history.state, '', document.URL)
  }
})

router.onError(error => {
  console.warn('[Router Error]', error)
})

export default router

vue3+pinia3状态管理

使用最新Pinia3状态管理工具。

/**
 * 状态管理Pinia
 * @author andy
 */

import { createPinia } from 'pinia'
// 引入pinia持久化存储
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

vue3小视频模块

vite-webchat项目增加了短视频模块，支持上下滑动切换小视频。

底部mini播放进度条，采用Slider 组件实现功能。支持实时显示当前播放进度、拖拽到指定位置。

<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="'vuplayer-' + 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-webchat聊天模块

聊天模块编辑器，支持多行文本输入、光标处插入gif图片、粘贴截图发送图片等功能。

<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+pinia3仿微信web版聊天系统的一些分享，希望对大家有所帮助哈~

附上几个最新实战项目

uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用

最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手

flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用

Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe