Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序

最新款tauri2+vite7+pinia3仿微信/QQ电脑端聊天软件Tauri2Chat。
tauri2-vue3-chat最新原创Tauri2.8+Vite7.1+Vue3+Pinia3+ElementPlus桌面端仿QQ/微信界面聊天应用。封装高复用tauri2多窗体、自定义圆角阴影窗口/导航条。提供了聊天、通讯录、收藏、朋友圈/短视频、我的等板块。

运用技术

• 编辑器：vscode
  
• 跨平台框架：tauri2.8
  
• 前端技术框架：vite^7.1.10+vue^3.5.22+vue-router^4.6.3
  
• 状态管理：pinia^3.0.3
  
• 本地存储：pinia-plugin-persistedstate^4.5.0
  
• UI组件库：element-plus^2.11.5
  
• 富文本编辑器：@vueup/vue-quill^1.2.0
  
• 样式预处理：sass^1.93.2
  
• 短视频滑动插件：swiper^12.0.2
  

项目框架目录

tauri2-vite7-wechat客户端聊天项目采用最新跨平台技术 tauri2.8 整合 vite7 搭建项目框架。

Tauri2-ViteChat聊天系统已经更新到我的原创作品集，感谢支持！

基于tauri2+vue3+element-plus桌面端仿微信exe聊天程序

tauri2.0结合vite.js搭建项目

之前有写过一篇关于tauri2结合vite.js搭建桌面端项目、创建多窗口、自定义托盘闪烁及右键菜单。有兴趣的可以去看看。
https://www.cnblogs.com/xiaoyan2017/p/18416811

tauri2-vue3-chat实现类似QQ登录/主窗口切换，支持主题壁纸、自定义最大化/最小化/关闭按钮，新窗口打开朋友圈/短视频。聊天模块支持新开窗口预览图片/视频、拖拽图片到聊天区域。

项目布局模板

项目整体分为左侧菜单栏+侧边栏+内容区(自定义导航条)等板块。

1.                                                                                                                                                                                                                                                                                                                                                                               

复制代码

项目入口配置main.js

1. 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+vue3自定义无边框圆角阴影窗口

设置 decorations: false 无边框模式。结合 transparent: true 和 shadow: false 实现自定义圆角阴影窗口。

1.                                                       {{title}}                                          

复制代码

tauri设置无边框窗口后，开启拖拽功能直接在需要拖拽的元素标签设置 data-tauri-drag-region 属性，另外tauri还支持css设置拖拽功能。

1. // 拖拽.vu__drag {-webkit-app-region: drag;}// 取消拖拽.vu__undrag {-webkit-app-region: no-drag;}

复制代码

Tauri2+Vite7封装多开窗口

1. /** * 创建新窗口 * @param {object} args 窗口配置参数 {label: 'home', url: '/home', width: 850, height: 610, ...} */export async function winCreate(args) {  await emit('win-create', args)}

复制代码

1. // 主窗口export async function mainWindow() {  await winCreate({    label: 'main',    url: '/',    title: 'TAURI-WINCHAT',    width: 850,    height: 620,    minWidth: 700,    minHeight: 450  })}// 登录窗口export async function loginWindow() {  await winCreate({    label: 'main-login',    url: '/login',    title: '登录',    width: 320,    height: 420,    resizable: false,    maximizable: false,    alwaysOnTop: true  })}// 关于窗口export async function aboutWindow() {  await winCreate({    label: 'win-about',    url: '/win/about',    title: '关于',    width: 320,    height: 350,    minWidth: 320,    minHeight: 350,    maximizable: false,    alwaysOnTop: true,  })}// 设置窗口export async function settingWindow() {  await winCreate({    label: 'win-setting',    url: '/win/setting',    title: '设置',    width: 550,    height: 470,    resizable: false,    maximizable: false,  })}

复制代码

自定义窗口配置参数

1. // 系统窗口参数(与tauri的new WebviewWindow()参数一致)const windowBaseOptions = {  // 窗口唯一标识label  label: null,  // 窗口标题  title: '',  // 窗口路由地址  url: '',  // 宽度  width: 850,  // 高度  height: 620,  // 最小宽度  minWidth: null,  // 最小高度  minHeight: null,  // 窗口x坐标  x: null,  // 窗口y坐标  y: null,  // 窗口居中显示(当设置x/y，则需要设置为false)  center: true,  // 是否可缩放  resizable: true,  // 是否可最小化  minimizable: true,  // 是否可最大化  maximizable: true,  // 是否可关闭  closable: true,  // 最大化窗口  maximized: false,  // 父窗口句柄label  parent: null,  // 窗口是否置顶  alwaysOnTop: false,  // 是否显示窗口边框(要创建无边框窗口，将decorations参数设置为false)  decorations: false,  // 是否透明窗口  transparent: true,  // 是否显示窗口阴影  shadow: false,  // 创建时是否显示窗口  visible: false,  // 禁止系统拖放  dragDropEnabled: false}

复制代码

tauri2+vue3自定义托盘闪烁|消息提醒|托盘菜单

1. /** * 自定义托盘图标 */use tauri::{  tray::{MouseButton, TrayIconBuilder, TrayIconEvent}, Emitter, Manager, Runtime};pub fn tray_create(app: &tauri::AppHandle) -> 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(())}

复制代码

1. /** * Tauri自定义系统托盘右键菜单 */import { WebviewWindow } from '@tauri-apps/api/webviewWindow'import { LogicalPosition } from '@tauri-apps/api/window'import { listen } from '@tauri-apps/api/event'import { authState } from '@/pinia/modules/auth'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()  })}

复制代码

以上就是tauri2+vite7+vue3搭建桌面端聊天项目的一些知识分享，希望对大家有所帮助！
附上几个最新版项目案例

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
Vite7网页版聊天|Vue3.5+Pinia3+ElementPlus仿微信网页端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聊天打字效果

 

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