Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

news/2025/11/1 0:34:32/文章来源:https://www.cnblogs.com/xiaoyan2017/p/19181509

最新研发tauri2.9+vite7.1+pinia3桌面版高颜值中后台系统TauriVue3Admin。

vite7-tauri2-admin最新跨平台技术tauri2.9+vite7.1.12+vue3 setup+pinia3+element-plus+echarts搭建电脑端轻量级管理后台系统模板。提供4种通用布局模板，支持i18n多语言、包含了表格、图表、表单、列表、编辑器、错误处理等业务模块。

360截图20251030220502382

技术栈

  • 开发工具：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

p2

p3

功能特性

  1. 基于最新跨平台技术栈Tauri2.9、Vite7、Vue3 setup、Pinia3、ElementPlus、Echarts、Vue-I18n
  2. 支持中英文/繁体三种语言
  3. 支持动态路由、面包屑导航、快捷路由标签栏
  4. 内置4种通用布局模板、随意切换风格
  5. 包含常用的图表、表格、表单、列表、编辑器、错误处理等业务场景
  6. tauri2封装多开窗口管理

p4

项目结构目录

tauri2-vue3-admin基于最新跨平台技术 Tauri2.9+Vite7.1 搭建项目框架模板。

360截图20251030220502372

Tauri2.9-ViteAdmin客户端后台系统已经同步到我的原创作品集，欢迎下载使用。

tauri2.9+vue3+element-plus客户端后台系统EXE

p5

项目入口文件

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')

通用布局模板

image

如上图：项目提供了4种常用布局模板。

image

<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>

360截图20251030221515932

360截图20251030222409100

360截图20251030222619494

360截图20251030224119951

360截图20251030232246233

001360截图20251030233823998

003360截图20251030235230182

005360截图20251031000142107

007360截图20251031000501778

002360截图20251030235111326

010360截图20251031001210670

010360截图20251031001327385

010360截图20251031001352942

011360截图20251031001548691

012360截图20251031002130776

013360截图20251031002208410

016360截图20251031002516399

017360截图20251031002838142

018360截图20251031003049021

019360截图20251031003131463

022360截图20251031003346415

023360截图20251031003449157

023360截图20251031003514335

024360截图20251031003543702

025360截图20251031003713702

image

tauri2+vue3自定义无边框窗口导航栏|系统按钮

image

image

image

image

image

image

<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多语言配置

image

tauri2-admin支持中英文/繁体三种语言切换，支持自定义配置语言。

image

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

image

image

image

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聊天打字效果

a8a5dc63jw1falkc05snfg206q046gli

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/952329.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[Chrome] [插件] 插件推荐

[Chrome] [插件] 插件推荐

[Chrome] [插件] 插件推荐$(".postTitle2").removeClass("postTitle2").addClass("singleposttitle");创建时间：2025年11月1日00:24:02 更新时间：2025年11月1日00:24:09目录01 翻译1.…
阅读更多...
餐饮不仅仅卖食物，更卖的是服务。

餐饮不仅仅卖食物，更卖的是服务。

餐饮业本质上属于服务业——这或许是我们最常听到，也最值得深思的一句话。顾客来到餐厅，当然希望品尝美味的食物，但他们的需求远不止于此。一顿满意的用餐体验，是味觉享受与心理满足的双重叠加。而后者，往往来自于…
阅读更多...
山石防火墙NAT-NAT64

山石防火墙NAT-NAT64

山石防火墙NAT64测试。测试环境如下： 转换前： 3001::1 -> 2011::1 转换后： 21.1.1.1 -> 30.1.1.1Cilent配置 # interface Vlan-interface10 ip address 20.1.1.2 255.255.255.0 # interface LoopBac…
阅读更多...
10月31日日记

10月31日日记

1.今天学习java 2.明天休息 3.B树和B+树在数据库索引中怎么应用？
阅读更多...
【RabbitMQ】RPC模式（请求/回复）

【RabbitMQ】RPC模式（请求/回复）

本章目标理解RabbitMQ RPC模式的工作原理和适用场景。掌握回调队列（Callback Queue）和关联ID（Correlation Id）的使用。实现基于RabbitMQ的异步RPC调用。学习RPC模式下的错误处理和超时机制。构建完整的微服务间同步…
阅读更多...
圆锥曲线的离心率1

圆锥曲线的离心率1

Problem 已知双曲线 $ E: \frac{ x^2 }{ a^2 } - \frac{ y^2 }{ b^2 }=1 \hspace{0.1cm} (a>0 , b>0)$ 的左、右焦点分别为 $ F_1,F_2 $ ， 过右焦点作平行于其中一条渐近线的直线交双曲线于点 $ A $ ，若三角形…
阅读更多...
由逃逸分析决定 --是什么意思？

由逃逸分析决定 --是什么意思？

Go 中“由逃逸分析决定”的意思核心概念：逃逸分析是编译器在编译期判断一个变量是否会“逃出”其作用域（函数栈帧）的过程。不逃逸 → 可以分配在栈上，函数返回时自动回收，效率更高。 发生逃逸 → 必须分配在堆上，…
阅读更多...
[笔记]CSP-S 2025 第二轮 Final Review

[笔记]CSP-S 2025 第二轮 Final Review

仍在更新中。 Hope everything ok. 依照 NOI 大纲 2025 进行整理，删掉了一些考不到的内容。 数据结构 STL deque（双端队列） deque<int> q; q.size(); q.empty(); q.clear(); q.front(),q.back(); q.emplace_b…
阅读更多...
文件多、杂乱，想分类也可以、不想分类也能快速找到文档的解决方案

文件多、杂乱，想分类也可以、不想分类也能快速找到文档的解决方案

多数人的常态：我的电脑桌面和云盘里堆满了各种文件夹，命名也比较随意。是的，我们是无法将文件管理得井井有条，至少时间一长，文件一多，就会“乱”。我们要承认和适应自己的这种特点。所以 文档大师 使用的“先收集…
阅读更多...
浏览器单击事件绑定空方法为什么能执行

浏览器单击事件绑定空方法为什么能执行

背景 标题就是我之前产生的疑惑。 排查 F12打开开发者工具，选择页面中的那个单击元素。找到事件侦听器 -> click 一般最下面这个就是我们的元素。之所以感到困惑，是因为这个按钮元素绑定的方法是个空函数，但是确…
阅读更多...
阅读笔记三：以“工匠精神”打磨职业内核 - 20243867孙堃2405

阅读笔记三：以“工匠精神”打磨职业内核 - 20243867孙堃2405

《程序员的修炼之路：从小工到专家》让我深刻体会到，“修炼”二字，无关天赋，无关捷径，而是以工匠精神坚守职业初心，在日复一日的沉淀中打磨职业内核。书中对“专家素养”的定义，没有停留在技术能力的层面，更强调…
阅读更多...
如何看懂explain工具信息，使用explain工具来分析索引

如何看懂explain工具信息，使用explain工具来分析索引

EXPLAIN 工具能用于获取查询执行计划，即分析 MySQL 如何执行一个 SQL 语句。我们可以通过使用EXPLAIN 去模拟优化器执行 SQL 语句，从而分析 SQL 语句有没有使用索引、是否采用全表扫描方式、判断能否更进一步优化等。…
阅读更多...
BLE-HCI浅学

BLE-HCI浅学

低功耗蓝牙协议栈学习之HCI自我阐述这几天的学习来看，蓝牙协议栈核心在于“协议栈”，就是很多协议像栈一样层层递进。而本文主要阐述HCI层。 本文主要简单的总结，什么是HCI、HCI流控、HCI的协议格式。 最后举一个BL…
阅读更多...
阅读笔记二：跳出技术陷阱，构建全局视野 - 20243867孙堃2405

阅读笔记二：跳出技术陷阱，构建全局视野 - 20243867孙堃2405

读完《程序员的修炼之路：从小工到专家》，我彻底打破了“技术好就能成为专家”的固有认知。书中清晰地指出，程序员的进阶之路，本质是从“单一技术执行者”到“全局解决方案提供者”的蜕变，而这一过程的核心，是跳出…
阅读更多...
1837

1837

72
阅读更多...
1067：整数的个数

1067：整数的个数

提交数:127712 通过数: 88967 【题目描述】 给定k(1<k<100)个正整数，其中每个数都是大于等于1，小于等于10的数。写程序计算给定的k个正整数中，1，5和10出现的次数。 【输入】 输入有两行：第一行包含一个正…
阅读更多...
12233

12233

/：
阅读更多...
Memory Profiler说明

Memory Profiler说明

Memory Profiler 目录Memory ProfilerMemory Usage On DeviceAllocated MemoryTotal Resident On DeviceAllocated Memory DisriibutionExecutables & MappedAndroid RuntimeNativeManagedGraphics (Estimated)Unt…
阅读更多...
1272

1272

q
阅读更多...
防火墙数据包转发流程--山石

防火墙数据包转发流程--山石

阅读更多...
最新文章

Copyright @ 2022~2023