Vite7网页版聊天

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

vite-vue3-webchat

聊天、联系人、收藏、朋友圈、小视频、我的

使用技术

• 编辑器：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="https://www.cnblogs.com/xiaoyan2017/p/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