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

腥狩频 · 昨天 06:40

最新研发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')

复制代码

通用布局模板

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

<template>
<slot v-if="!route?.meta?.hideMenuBar" name="menubar">
<MenuBar />
</slot>
<slot name="sidebar">
<SideBar />
</slot>
</aside>
<Winbtn v-if="!route?.meta?.hideWinBar" />
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</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组件实现功能。支持实时显示当前播放进度、拖拽到指定位置。

<el-tabs v-model="activeName" class="vu__video-tabs">
<el-tab-pane label="关注" name="attention" />
<el-tab-pane label="推荐" name="recommend" />
</el-tabs>
<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>
...
@{{item.author}}
{{item.desc}}
</swiper-slide>
</swiper-container>
<el-slider class="vu__video-progressbar" v-model="progressBar" @input="handleSlider" @change="handlePlay" />
{{videoTime}} / {{videoDuration}}

复制代码

vue3-webchat聊天模块

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

<template>
...
<Scrollbar ref="scrollRef" autohide gap="2">
...
</Scrollbar>
...
<Editor ref="editorRef" v-model="editorValue" @paste="handleEditorPaste" />
<button @click="handleSubmit">发送(S)</button>
...
</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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

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

相关帖子

签约作者

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

相关帖子

相关推荐

签约作者