Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
原创tauri2.0+vue3+pinai2仿QQ/微信客户端聊天Exe程序TauriWinChat。tauri2-vue3-winchat自研vite5+tauri2.0+vue3 setup+element-plus跨平台仿QQ|微信桌面端聊天软件。全新封装tauri2多开窗口管理、自定义圆角阴影窗体。实现聊天、通讯录、收藏、我的、朋友圈/小视频等模块。
技术栈
[*]编码器：VScode
[*]技术框架：tauri2.0+vite^5.4.7+vue^3.5.8+vue-router^4.4.5
[*]状态管理：pinia^2.2.2
[*]本地存储：pinia-plugin-persistedstate^4.0.2
[*]UI组件库：element-plus^2.8.3
[*]富文本编辑器：@vueup/vue-quill^1.2.0
[*]样式预处理：sass^1.79.3
[*]小视频滑动组件：swiper^11.1.14
项目框架结构
vue3-taurichat桌面聊天项目采用最新跨平台框架 tauri2.0 整合 vite5 搭建项目模板。
Tauri2.0-Vue3chat聊天程序已经同步到我的原创作品集，有需要的可以去看看~
原创tauri2.0+vite5+element-plus仿微信桌面端Exe聊天系统
vite.js整合tauri2.0创建多窗口|自定义托盘闪烁右键菜单
之前有分享过一篇介绍tauri2结合vite.js搭建桌面端项目、创建多窗口、自定义托盘闪烁及右键菜单。感兴趣的可以去瞅瞅。
https://www.cnblogs.com/xiaoyan2017/p/18416811
tauri2-vue3chat实现类似QQ登录/主窗口切换，支持主题壁纸、置顶窗口、自定义最大化/最小化/关闭按钮，聊天模块支持图片/视频新窗口预览、拖拽图片到聊天区域。
如果需要做数据管理的话，可以去看看下面这篇最新开发的tauri2.0+vue3桌面端后台管理系统。
https://www.cnblogs.com/xiaoyan2017/p/18467237
主入口main.js
/**
* 主入口文件main.js
*/
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
// 引入组件库
import VEPlus from 've-plus'
import 've-plus/dist/ve-plus.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'
createApp(App)
.use(VEPlus)
.use(ElementPlus)
.use(Router)
.use(Pinia)
.mount('#app')Tauri2.0-Vue3chat布局模板
项目整体分为菜单栏+侧边栏+右侧内容区+右上角导航条等模块。
<template>
<template v-if="!route?.meta?.isNewWin">
<slot v-if="!route?.meta?.hideMenuBar" name="menubar">
<MenuBar />
</slot>
<slot name="sidebar">
<SideBar />
</slot>
</aside>
<ToolBar v-if="!route?.meta?.hideToolBar" />
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</template>
<template v-else>
<WinLayout />
</template>
</template>vite.js+tauri2.0实现无边框圆角阴影拖拽窗体
项目采用 decorations: false 无边框模式。结合 transparent: true 和 shadow: false 实现自定义圆角阴影窗口。
.vu__chatbox {height: calc(100vh); padding: 5px; overflow: hidden;}
.vu__layout {
background-color: #f5f5f5;
overflow: hidden;
height: 100%; width: 100%;
position: relative; z-index: 100;
border-radius: 8px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15),0 1px 5px -1px rgba(0, 0, 0, 0.1),0 2px 5px rgba(0, 0, 0, 0.1);
}
[*]tauri2.0自定义系统最小化/最大化/关闭
<template>
<i ></i>
<i:></i>
<i ></i>
</template>tauri设置无边框窗口后，拖拽功能直接在需要拖拽的元素设置 data-tauri-drag-region 属性，另外tauri还支持css设置拖拽功能。
// 拖拽
.vu__drag {-webkit-app-region: drag;}
// 取消拖拽
.vu__undrag {-webkit-app-region: no-drag;}tauri2+vue3自定义托盘闪烁|托盘右键菜单
src-tauri/src目录新建一个tray.rs托盘图标文件。
/**
* 自定义托盘图标
*/
use tauri::{
tray::{MouseButton, TrayIconBuilder, TrayIconEvent}, Emitter, Manager, Runtime
};
pub fn tray_create<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
let _ = TrayIconBuilder::with_id("tray")
.tooltip("TAURI-WINCHAT")
.icon(app.default_window_icon().unwrap().clone())
.on_tray_icon_event(|tray, event| match event {
TrayIconEvent::Click {
id: _,
position,
rect: _,
button,
button_state: _,
} => match button {
MouseButton::Left {} => {
let windows = tray.app_handle().webview_windows();
for (key, value) in windows {
println!("点击左键: {}", key);
if key == "main-login" || key == "main" {
value.show().unwrap();
value.unminimize().unwrap();
value.set_focus().unwrap();
}
}
}
MouseButton::Right {} => {
println!("点击右键");
tray.app_handle().emit("tray_contextmenu", position).unwrap();
}
_ => {}
},
TrayIconEvent::Enter {
id: _,
position,
rect: _,
} => {
println!("鼠标滑过托盘");
tray.app_handle().emit("tray_mouseenter", position).unwrap();
}
TrayIconEvent::Leave {
id: _,
position,
rect: _,
} => {
println!("鼠标离开托盘");
tray.app_handle().emit("tray_mouseleave", position).unwrap();
}
_ => {}
})
.build(app);
Ok(())
}
托盘闪烁提醒和右键菜单文件
export default async function TrayContextMenu() {
console.log('create tray contextmenu...')
const authstate = authState()
// 右键菜单宽度
let menuW = 150
// 右键菜单高度
let menuH = authstate.authorization ? 300 : 48
let webview = new WebviewWindow('win-traymenu', {
url: '/tray/contextmenu',
title: '托盘右键菜单',
width: menuW,
height: menuH,
x: window.screen.width,
y: window.screen.height,
skipTaskbar: true,
transparent: true,
shadow: false,
decorations: false,
center: false,
resizable: false,
alwaysOnTop: true,
focus: true,
visible: false
})
await webview.listen('tauri://window-created', async() => {
const win = await WebviewWindow.getByLabel('win-traymenu')
win.hide()
})
await webview.listen('tauri://blur', async() => {
const win = await WebviewWindow.getByLabel('win-traymenu')
win.hide()
})
await webview.listen('tauri://error', async(error) => {
console.log('traymenu error!', error)
})
// 监听托盘右键菜单事件
listen('tray_contextmenu', async(event) => {
console.log('tray_contextmenu: ', event)
let position = event.payload
const win = await WebviewWindow.getByLabel('win-traymenu')
if(!win) return
win.setAlwaysOnTop(true)
win.setFocus()
win.setPosition(new LogicalPosition(position.x - 5, position.y - menuH + 5))
win.show()
})
}<template>
<template v-if="authstate.authorization">
<img src="https://www.cnblogs.com/static/tray-online.png" />我在线上
<img src="https://www.cnblogs.com/static/tray-busy.png" />忙碌
<img src="https://www.cnblogs.com/static/tray-nodisturb.png" />请勿打扰
<img src="https://www.cnblogs.com/static/tray-hide.png" />隐身
<img src="https://www.cnblogs.com/static/tray-offline.png" />离线
关闭头像闪动
设置
关于
<el-icon size="12"><Monitor /></el-icon>打开主面板
</template>
<el-icon size="12" color="red"><SwitchButton /></el-icon>退出
</template>综上就是Tauri2.0+Vue3实战开发桌面端聊天项目的一些知识分享，希望对大家有些帮助~
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
最后附上两个最新electron+vue3实例项目
https://www.cnblogs.com/xiaoyan2017/p/18396212
https://www.cnblogs.com/xiaoyan2017/p/18366451
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]