最新研发tauri2.9+vite7.1+pinia3桌面版高颜值中后台系统TauriVue3Admin。
vite7-tauri2-admin最新跨平台技术tauri2.9+vite7.1.12+vue3 setup+pinia3+element-plus+echarts搭建电脑端轻量级管理后台系统模板。提供4种通用布局模板，支持i18n多语言、包含了表格、图表、表单、列表、编辑器、错误处理等业务模块。
技术栈
- 开发工具：VScode
- 跨平台框架：Tauri^2.9
- 前端技术框架：vite^7.1.12+vue^3.5.22+vue-router^4.6.3
- 组件库：element-plus^2.11.5
- 状态管理：pinia^3.0.3
- 国际化方案：vue-i18n^11.1.12
- 图表组件：echarts^6.0.0
- markdown编辑器：md-editor-v3^6.1.0
- 富文本编辑器：@vueup/vue-quill^1.2.0
- 模拟数据：mockjs^1.1.0
功能特性
- 基于最新跨平台技术栈Tauri2.9、Vite7、Vue3 setup、Pinia3、ElementPlus、Echarts、Vue-I18n
- 支持中英文/繁体三种语言
- 支持动态路由、面包屑导航、快捷路由标签栏
- 内置4种通用布局模板、随意切换风格
- 包含常用的图表、表格、表单、列表、编辑器、错误处理等业务场景
- tauri2封装多开窗口管理
项目结构目录
tauri2-vue3-admin基于最新跨平台技术 Tauri2.9+Vite7.1 搭建项目框架模板。
Tauri2.9-ViteAdmin客户端后台系统已经同步到我的原创作品集，欢迎下载使用。
tauri2.9+vue3+element-plus客户端后台系统EXE
项目入口文件
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'// 引入插件配置
import Plugins from './plugins'// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'createApp(App)
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')
通用布局模板
如上图：项目提供了4种常用布局模板。
<script setup>import { appState } from '@/pinia/modules/app'import Toolbar from '@/layouts/components/Toolbar.vue'import Sidebar from '@/layouts/components/sidebar/index.vue'import Menus from '@/layouts/components/menus/index.vue'import Breadcrumb from '@/layouts/components/Breadcrumb.vue'import Tabview from '@/layouts/components/Tabview.vue'import Main from '@/layouts/components/Main.vue'const appstate = appState() </script><template><div class="vuadmin__layout flexbox flex-col"><Toolbar /><div class="vuadmin__layout-body flex1 flexbox"><!-- 侧边栏 --><div class="vuadmin__layout-sidebar"><Sidebar /></div><!-- 菜单栏 --><div class="vuadmin__layout-menus" :class="{'hidden': appstate.config.collapsed}"><el-scrollbar><Menus :rootRouteEnable="false" /></el-scrollbar></div><!-- 右侧主内容区 --><div class="vuadmin__layout-main flex1 flexbox flex-col"><!-- 面包屑导航 --><Breadcrumb v-if="appstate.config.breadcrumb" /><!-- 标签页 --><Tabview v-if="appstate.config.tabview" /><!-- 内容区 --><Main /></div></div></div> </template>
tauri2+vue3自定义无边框窗口导航栏|系统按钮
<script setup>import { ref, markRaw } from 'vue'import { ElMessageBox } from 'element-plus'import { QuestionFilled, SwitchButton } from '@element-plus/icons-vue'import { getCurrentWindow } from '@tauri-apps/api/window'import { listen } from '@tauri-apps/api/event'import { exit } from '@tauri-apps/plugin-process'import { isTrue } from '@/utils'import { authState } from '@/pinia/modules/auth'const authstate = authState()const props = defineProps({color: String,// 窗口是否可最小化 minimizable: {type: [Boolean, String], default: true},// 窗口是否可最大化 maximizable: {type: [Boolean, String], default: true},// 窗口是否可关闭 closable: {type: [Boolean, String], default: true},// 层级 zIndex: {type: [Number, String], default: 2024},})const hasMaximized = ref(false)const isResizable = ref(true)const isMaximizable = ref(true)// 用户是否可以手动调整窗口大小 getCurrentWindow().isResizable().then(res => {isResizable.value = res})// 窗口是否可以最大化 getCurrentWindow().isMaximizable().then(res => {isMaximizable.value = res})// 初始监听窗口是否最大化 getCurrentWindow().isMaximized().then(res => {hasMaximized.value = res})// 实时监听窗口是否最大化 listen('tauri://resize', async() => {hasMaximized.value = await getCurrentWindow().isMaximized()})// 最小化 const handleWinMin = async() => {await getCurrentWindow().minimize()}// 最大化/还原 const handleWinToggle = async() => {await getCurrentWindow().toggleMaximize()}// 关闭 const handleWinClose = async() => {const isMajor = getCurrentWindow().label.indexOf('main') > -1if(isMajor) {ElMessageBox.confirm('是否最小化到系统托盘，不退出程序?', '提示', {type: 'warning',icon: markRaw(QuestionFilled),confirmButtonText: '残忍退出',cancelButtonText: '最小化到托盘',customStyle: {'width': '300px'},draggable: true,roundButton: true,center: true,buttonSize: 'small',distinguishCancelAndClose: true,}).then(async() => {authstate.logout()await exit()}).catch(async(action) => {if(action === 'cancel') {await getCurrentWindow().hide()}})}else {await getCurrentWindow().close()}} </script><template><div class="ev__winbtns flexbox flex-alignc vu__drag" :style="{'z-index': zIndex}"><div class="ev__winbtns-actions flexbox flex-alignc vu__undrag" :style="{'color': color}"><a v-if="isTrue(minimizable)" class="wbtn min" title="最小化" @click="handleWinMin"><i class="wicon iconfont elec-icon-min"></i></a><a v-if="isTrue(maximizable)" class="wbtn toggle" :title="hasMaximized ? '向下还原' : '最大化'" @click="handleWinToggle"><i class="wicon iconfont" :class="hasMaximized ? 'elec-icon-restore' : 'elec-icon-max'"></i></a><a v-if="isTrue(closable)" class="wbtn close" title="关闭" @click="handleWinClose"><i class="wicon iconfont elec-icon-quit"></i></a></div></div> </template><style lang="scss" scoped>@use './index.scss'; </style>
vue-i18n多语言配置
tauri2-admin支持中英文/繁体三种语言切换，支持自定义配置语言。
import { createI18n } from 'vue-i18n'
import { appState } from '@/pinia/modules/app'// 引入语言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'// 默认语言
export const langVal = 'zh-CN'export default async (app) => {const appstate = appState()const lang = appstate.lang || langValappstate.setLang(lang)const i18n = createI18n({legacy: false,locale: lang,messages: {'en': enUS,'zh-CN': zhCN,'zh-TW': zhTW}})app.use(i18n)
}
tauri2-vue3admin自定义动态图表hooks
import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'export function useEcharts(el, options) {let chartEllet chartRef = ref(null)let erd = elementResizeDetectorMaker()const resizeHandle = () => {chartEl && chartEl.resize()}onMounted(() => {if(el?.value) {chartEl = echarts.init(el.value)chartEl.setOption(options)chartRef.value = chartEl}erd.listenTo(el.value, resizeHandle)})onBeforeUnmount(() => {chartEl.dispose()erd.removeListener(el.value, resizeHandle)})return chartRef
}
综上就是tauri2+vite7+vue3搭建客户端中后台管理系统的一些知识分享，希望对大家有所帮助！
附上几个最新研发实战项目案例
Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
vite7-webos网页版os管理|Vue3+Vite7+ArcoDesign搭建pc端os后台系统
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
![[该退役了]](https://img2024.cnblogs.com/blog/3598255/202510/3598255-20251031222351505-1095570980.png)
