最新版Vite7.1+Tauri2.8+Vue3电脑端仿QQ/微信聊天程序
【摘要】 2025最新原创自研Tauri2.8+Vite7.1+Vue3+Pinia3+ElementPlus桌面端仿QQ/微信界面聊天软件。
tauri2-vue3-winchat：基于tauri2.8+vite7.1+vue3 setup+pinia3+element-plus搭建客户端聊天exe系统模板。提供了聊天、通讯录、收藏、朋友圈、短视频、我的等模块。
采用技术
- 开发工具：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
- 组件库：element-plus^2.11.5
- 富文本编辑器：@vueup/vue-quill^1.2.0
- 样式预处理：sass^1.93.2
- 短视频滑动插件：swiper^12.0.2
项目框架结构
使用最新跨平台技术Tauri2.8结合Vite7.1构建工具搭建项目框架。
项目布局模板
项目布局分为菜单栏+侧边栏+右侧主区域三个板块。
<template>
<div class="vu__chatbox">
<template v-if="!route?.meta?.isNewWin">
<div
class="vu__container flexbox flex-alignc flex-justifyc"
: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">
<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">
<ToolBar v-if="!route?.meta?.hideToolBar" />
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<WinLayout />
</template>
</div>
</template>
入口文件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+vue3自定义无边框窗口导航栏
<!-- 自定义系统导航条 -->
<script setup>
import { ref } from 'vue'
import { isTrue } from '@/utils'
import { winSet } from '@/windows/actions'
import Winbtns from './btns.vue'
const props = defineProps({
// 标题
title: {type: String, default: ''},
// 标题颜色
color: String,
// 背景色
background: String,
// 标题是否居中
center: {type: [Boolean, String], default: false},
// 是否固定
fixed: {type: [Boolean, String], default: false},
// 背景是否镂空
transparent: {type: [Boolean, String], default: false},
// 层级
zIndex: {type: [Number, String], default: 2024},
/* 控制Winbtn参数 */
// 窗口是否可最小化
minimizable: {type: [Boolean, String], default: true},
// 窗口是否可最大化
maximizable: {type: [Boolean, String], default: true},
// 窗口是否可关闭
closable: {type: [Boolean, String], default: true},
// 关闭前回调，会暂停实例关闭 function(done)，done用于关闭
beforeClose: Function
})
</script>
<template>
<div class="ev__winbar" :class="{'fixed': fixed || transparent, 'transparent': transparent}">
<div class="ev__winbar-wrap flexbox flex-alignc vu__drag">
<div class="ev__winbar-body flex1 flexbox flex-alignc">
<!-- 左侧区域 -->
<div class="ev__winbar-left"><slot name="left" /></div>
<!-- 标题 -->
<div class="ev__winbar-title" :class="{'center': center}">
<slot name="title">{{title}}</slot>
</div>
<!-- 右侧附加区域 -->
<div class="ev__winbar-extra vu__undrag"><slot name="extra" /></div>
</div>
<Winbtns :color="color" :minimizable="minimizable" :maximizable="maximizable" :closable="closable" :zIndex="zIndex" />
</div>
</div>
</template>
tauri2+vue3多窗口管理
/**
* 创建新窗口
* @param {object} args 窗口配置参数 {label: 'home', url: '/home', width: 850, height: 610, ...}
*/
export async function winCreate(args) {
await emit('win-create', args)
}
调用方式如下
// 主窗口
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,
})
}
自定义多窗口支持如下参数
// 系统窗口参数(与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
}
Ok，综上tauri2+vite7+vue3搭建客户端聊天系统的一些项目分享，希望对大家有帮助！
Electron38.2实战客户端OS系统|vite7+vue3+electron仿mac/wins桌面
2025最新款Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe
最新研发vite7.0+electron38客户端仿微信EXE聊天软件
原创tauri2.0+vue3.5+element-plus桌面版后台管理系统
Electron32-Vite5-OS跨平台os模板|electron32+vue3通用os系统
Flutter3.32实战桌面端OS系统|flutter3仿macOS桌面
flutter3.27跨平台仿微信客户端聊天Exe程序|朋友圈|短视频
原创uniapp+vite5+vue3+uv-ui跨三端短视频+直播+聊天app应用
uni-app+deepseek-v3跨三端ai流式输出对话模板
flutter3+deepseek手机端ai流式输出聊天模板
实战跨平台Electron35+DeepSeek-V3搭建客户端AI模板
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）