Tauri2.9+Vue3电脑端OS系统|vite7+tauri2+arcoDesign桌面os后台模板

news/2025/11/17 23:46:46/文章来源:https://www.cnblogs.com/xiaoyan2017/p/19234843

最新版tauri2.9+vite7.2+pinia3+arco仿macOS/wins管理系统TauriVue3OS。

vite7-tauri2-os基于最新跨平台框架tauri2.9+vite7.2.2+vue3 setup+pinia3+arco-design+echarts实战桌面客户端OS管理后台模板。内置macOS+windows两种桌面模板、可拖拽栅格菜单、支持JSON格式配置桌面菜单/Dock菜单。

002360截图20251116225622766

360截图20251116223719590

技术栈

  • 编辑器：VScode
  • 跨平台技术：tauri^2.9
  • 前端框架技术：vite^7.2.2+vue^3.5.24+vue-router^4.6.3
  • 组件库：@arco-design/web-vue^2.57.0
  • 状态管理：pinia^3.0.4
  • 拖拽插件：sortablejs^1.15.6
  • 滑屏插件：swiper^12.0.3
  • 图表组件：echarts^6.0.0
  • markdown编辑器：md-editor-v3^6.1.1
  • 模拟数据：mockjs^1.1.0

a2

a6

项目特征

  1. 基于最新技术栈Tauri2.9、Vite7.2、Vue3 setup、Pinia3、ArcoDesign、Echarts
  2. tauri2.x封装新开多窗口管理
  3. 提供macOS+windows两种风格桌面模板
  4. 支持json格式配置桌面菜单+Dock菜单
  5. 自研可拖拽桌面栅格卡片布局
  6. 支持自定义桌面背景皮肤、采用高斯模糊毛玻璃效果
  7. 提供图表、表格、列表、表单、编辑器等常用页面模板
  8. 支持主窗口或独立新窗口打开路由页面

a3

项目框架结构

tauri2-vite7-os 使用 vite7.2 整合 tauri2.9 跨平台框架搭建项目，采用vue3 setup语法开发页面。

360截图20251116213614040

Tauri2.9-Vue3OS客户端os系统已经更新到我的原创作品集，欢迎下载使用。

tauri2.9+vite7+arco-design桌面端OS管理系统

a1

a7

入口配置main.js

/*** 渲染进程配置main.js* @author andy*/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")

360截图20251116220507417

360截图20251116220840960

005360截图20251116230654881

360截图20251116221955720

tauri2-vue3os桌面模板

提供了macOS和windows两种布局模板。

image

<script setup>import { appState } from '@/pinia/modules/app'// 引入布局模板
  import MacosLayout from './template/macos.vue'import WindowsLayout from './template/windows.vue'const appstate = appState()const DeskLayout = {macos: MacosLayout,windows: WindowsLayout}
</script><template><div class="vu__container flexbox" :style="{'--themeSkin': appstate.config.skin}"><component :is="DeskLayout[appstate.config.layout]" /></div>
</template>

360截图20251116213614045

360截图20251116213614046

<script setup>import { appState } from '@/pinia/modules/app'import Titlebar from '@/layouts/components/titlebar/index.vue'import Desk from '@/layouts/components/mac/desk.vue'import Dock from '@/layouts/components/mac/dock.vue'const appstate = appState()
</script><template><div class="vu__layout flexbox flex-col"><div class="vu__layout-header"><Titlebar /></div><div class="vu__layout-body flex1 flexbox"><Desk /></div><div class="vu__layout-footer"><Dock v-if="appstate.config.dockEnable" /></div></div>
</template>

001360截图20251116224039705

002360截图20251116225322181

003360截图20251116230158274

004360截图20251116230512396

005360截图20251116231001404

005360截图20251116231308843

005360截图20251116231308844

005360截图20251116231456748

006360截图20251116232041658

006360截图20251116232125484

006360截图20251116232151892

005360截图20251116230654882

005360截图20251116230654883

007360截图20251116232406021

010360截图20251116234733889

010360截图20251116234823328

011360截图20251116235156415

011360截图20251116235359296

012360截图20251116235534896

013360截图20251116235705104

014360截图20251117000001448

016360截图20251117000534471

016360截图20251117000616095

018360截图20251117001056214

019360截图20251117001240213

021360截图20251117002123516

tauri2-vue3os桌面栅格结构

image

image

image

自定义桌面菜单图标变量

const deskVariable = ref({'--icon-radius': '10px', // 圆角'--icon-size': '60px', // 图标尺寸'--icon-gap-col': '30px', // 水平间距'--icon-gap-row': '30px', // 垂直间距'--icon-labelSize': '12px', // 标签文字大小'--icon-labelColor': '#fff', // 标签颜色'--icon-fit': 'contain', // 图标自适应模式
})

桌面菜单配置参数

/*** @name Desk桌面菜单配置参数* @param label 图标标题* @param imgico 图标(本地或网络图片) 支持Arco-Design内置图标或自定义iconfont图标* @param path 跳转路由页面* @param link 跳转外部链接* @param hideLabel 是否隐藏图标标题* @param filter 是否禁用拖拽* @param background 自定义图标背景色* @param color 自定义图标颜色* @param size 栅格磁贴布局 1x1 ... 12x12* @param padding 内边距* @param onClick 点击图标回调函数* @param isNewin 新窗口打开路由页面* @param children 二级菜单*/

image

image

桌面菜单json配置示例

const deskMenu = [{uid: 'u1102f210-737e-1d4e-6438-7feefac27e48',label: '主页',imgico: '/tauri.svg',list: [{imgico: markRaw(Today), size: '3x5', padding: '50px 0 0', filter: true},{label: '日历', imgico: markRaw(Calendar4x2), size: '4x2'},{label: '倒计时', imgico: markRaw(CountDown), size: '2x2'},{label: '便签', imgico: markRaw(NoteBook), size: '3x3'},{label: '工作台', imgico: markRaw(Dashboard), path: '/home/dashboard', isNewin: true, hideLabel: true, size: '3x2'},// ...
    ]},{uid: 'u1103e210-037e-1u4e-1250-4seefac27e48',label: 'App',imgico: '/static/mac/appstore.png',list: [{label: 'Appstore', imgico: '/static/mac/appstore.png'},{label: '地图', imgico: '/static/mac/maps.png'},{label: '浏览器', imgico: '/static/mac/safari.png'},...]},{uid: 'u1105f710-807e-1e4e-1550-4deefac27e48',label: '摸鱼',imgico: 'https://hao8.qhimg.com/dmfd/80_80_75/t11148baf6114dc38875f0173e7.webp',list: [{label: 'Vue.js', imgico: 'vue.svg', link: 'https://vuejs.org/',},{label: 'Vite7.2.2', imgico: 'vite.svg', link: 'https://vite.dev/', background: '#fff', padding: '5px', size: '2x1'},{label: 'Tauri^2.9', imgico: '/tauri.svg', link: 'https://tauri.app/', background: '#EAFAFF', padding: '20px', size: '2x2'},...]},{uid: 'u1107f510-807e-1e4e-1550-4deefac27e48',label: 'AI',imgico: 'https://openres.xfyun.cn/xfyundoc/2024-10-20/b2b49aa6-ee0d-4b77-9ce9-c20a27ee6618/1729415860861/adfsasdf.png',list: [{label: 'DeepSeek', imgico: 'https://cdn.deepseek.com/logo.png', link: 'https://chat.deepseek.com/', background: '#fff', padding: '20px', size: '3x2'},...]},{uid: 'u1108d210-207e-1e8e-9950-9deefac27e48',label: '工作台',imgico: markRaw(IconComputer),list: [{label: 'Tauri^2.9', imgico: '/static/svg/tauri.svg', link: 'https://tauri.app/', background: '#dffbff', padding: '10px', size: '2x2'},{label: 'Vite^7.2.2', imgico: 'https://vite.dev/logo.svg', link: 'https://vite.dev/'},{label: '首页', imgico: markRaw(IconHome), path: '/home', color: '#fff', isNewin: true},{label: '组件',children: [{label: '表格', imgico: '/static/svg/table.svg', path: '/components/table/all',},// ...
        ]},{label: '管理中心',children: [// ...
        ]},// ...
      {label: '设置',children: [{label: '网站设置', imgico: '/static/svg/settings.svg', path: '/setting/system/website'},{label: '邮件服务', imgico: '/static/mac/mail.png', path: '/setting/system/mail'},]},{label: '收藏夹',children: [{label: 'Tauri^2.9', imgico: '/tauri.svg', link: 'https://tauri.app/'},{label: 'Vite.js', imgico: '/vite.svg', link: 'https://vite.dev/'},{label: 'Vue.js', imgico: '/vue.svg', link: 'https://vuejs.org/'},// ...
        ]},{label: '公众号', imgico: '/static/qr.png', background: '#fff', size: '2x1',onClick: () => {// ...
        }},]}
]

p2-360截图20251116104429544

以上就是tauri2+vue3搭建跨平台桌面版os系统的一些知识分享，希望对大家有些帮助哈~

附上几个最新研发项目实例

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

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

最新版uni-app+vue3+uv-ui跨端仿携程酒店预订模板【H5+小程序+App端】

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

最新版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应用

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

duitang

 

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

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

相关文章

黑马程序员SpringCloud微服务开发与实战- Docker-01

黑马程序员SpringCloud微服务开发与实战- Docker-01

黑马程序员SpringCloud微服务开发与实战- Docker-01Posted on 2025-11-17 23:42 心默默言 阅读(0) 评论(0) 收藏 举报1. Ubuntu中安装docker 依次按照下面步骤即可完成docker的安装。这部分参考了钟老师的《Docke…
阅读更多...
11-17午夜盘思

11-17午夜盘思

1、大盘无忧； 2、情绪方面：摩恩电气震荡整理，高位相对缓和，情绪周期由弱转强，但平潭发展，海峡创新停牌，对高位接力，尤其是妖股的炒作肯定是有打击的，明天高位妖股的分歧可能比较大，注意一下，观察高位是否有…
阅读更多...
葫芦娃，要远离小心毒蛇和蝎子。

葫芦娃，要远离小心毒蛇和蝎子。

阅读更多...
6.S081 操作系统 Lab1

6.S081 操作系统 Lab1

一些有用的参考资料和博客 B站上传 ： MIT 6.S081 2020 操作系统 [中英文字幕] Doraemonzzz 的博客，讲解了如何用python 测试题目 Miigons blog2012年XV6文档 2012 年- xv6 操作系统 - 英文 对应 2012年 - xv6 中文文…
阅读更多...
Coco AI 参选 Gitee 2025 最受欢迎开源软件！您的每一票，都是对中国开源的硬核支持

Coco AI 参选 Gitee 2025 最受欢迎开源软件！您的每一票，都是对中国开源的硬核支持

极限科技（INFINI Labs）4 个开源项目（Coco AI、Analysis-IK 分词插件、Gateway、Console）正在参加 Gitee 2025 最受欢迎的开源软件投票活动， 👉 快来给我投票吧！一起见证中国开源力量，谢谢你宝贵的一票！「Git…
阅读更多...
题解：P14002 [eJOI 2025] Navigation

题解：P14002 [eJOI 2025] Navigation

题意：有一个仙人掌，但是不告诉你这个图。现在有一个完全没有任何记忆的机器人，每次只告诉你当前走到这个点的颜色和邻点的颜色，保证每次给出点颜色的顺序都一样，你每次可以结束或者给当前点染色并走向一个点。设计…
阅读更多...
多媒体与可视化：WebAssembly集成与实时视频贴图

多媒体与可视化：WebAssembly集成与实时视频贴图

好的，这是一个非常深入且专业的问题，直指高性能Web开发与计算机图形学的核心。下面我将详细分享在海康三维可视化项目中的具体实践与挑战。多媒体与可视化：WebAssembly集成与实时视频贴图 第一部分：WebAssembly集成…
阅读更多...
第三章作业 动态规划

第三章作业 动态规划

实践报告 按照动态规划法的求解步骤分析作业题目“数字三角形”： 1.1 根据最优子结构性质，列出递归方程式，说明方程式的定义、边界条件 递归方程式：dp[i][j] = triangle[i][j] + max(dp[i-1][j-1], dp[i-1][j]) 状…
阅读更多...
Java Room与SQLite如何交互

Java Room与SQLite如何交互

在Android开发中，Room是一个持久性库，它提供了抽象层，使得开发者可以更方便地处理数据库操作。SQLite是一个轻量级的数据库引擎，它是Android内置的数据库解决方案。要在Android应用中使用Room和SQLite交互，你需要…
阅读更多...
11月17日日记

11月17日日记

1.今天进行java考试做房产信息管理系统开发 2.明天工程实训 3.如何解决http://localhost:8080/ 404的问题
阅读更多...
第三十一天

第三十一天

今天的学习聚焦在“路径检索”相关知识，尤其是最短路径的匹配方法，收获特别扎实。 先理清了路径检索的核心两种方法：深度优先搜索（DFS）像走迷宫时一条路走到黑再回溯，优先探完一条分支再换方向；广度优先搜索（B…
阅读更多...
wsl 常用命令

wsl 常用命令

wsl安装 wsl --install #会自动安装wsl 和默认Ubuntu#建议将 WSL 默认版本设置为 WSL2，以获得更好的性能和兼容性 wsl --set-default-version 2 #在安装 Ubuntu 之前，更新 WSL 内核也是好习惯 wsl --update#如果要重…
阅读更多...
AI模型的github——ModelScope.co和Hugging Face.cn

AI模型的github——ModelScope.co和Hugging Face.cn

好的，我来通俗易懂地解释一下 ModelScope 和 Hugging Face 是什么。 您可以把它想象成两个巨大的、开放的“模型应用商店”或“模型图书馆”。1. Hugging Face 核心比喻：AI 模型的 GitHub它是什么？ 它是一个全球领先…
阅读更多...
屋顶望月

屋顶望月

阅读更多...
逆向基础--C++ 运算符 (05)

逆向基础--C++ 运算符 (05)

逆向基础--C++ 运算符 (05)一.运算符C++的运算符 包括：算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符、其它运算符。1.1 算术运算符包括：+(加)　　-(减)　　*(乘)　　/(除)　　%(取模)　　++(整数值增加…
阅读更多...
团队管理与技术驱动

团队管理与技术驱动

好的，这两个问题是技术管理者核心价值的集中体现。下面我将结合具体实践，系统性地阐述我的管理理念和方法。团队管理与技术驱动 第一部分：技术选型、规划与三者平衡 我的核心理念是：技术是服务于业务和团队的工具，…
阅读更多...
日总结 27

日总结 27

RFID，全称为射频识别，是一种利用无线电波进行非接触式自动识别的技术。 你可以把它想象成一个更先进的“条形码”。但与需要直线对准、一次只能扫描一个的条形码不同，RFID具有以下独特优势：非接触式： 无需看见即…
阅读更多...
随缘打赏

随缘打赏

阅读更多...
java linux 中文

java linux 中文

您提到的“Java Linux 中文”可能是指在 Linux 系统中运行 Java 应用程序，或者与 Java 相关的 Linux 操作。以下是一些与 Java 和 Linux 相关的常见命令和脚本，帮助您更好地在 Linux 环境中使用 Java：一、Java 环境…
阅读更多...
java linux jdk

java linux jdk

你提到的“Java Linux JDK”可能是指在 Linux 系统上安装和使用 Java 开发环境（JDK）的相关内容。以下是一些常见的 Java 环境安装和管理方法，适用于大多数 Linux 发行版（如 Ubuntu、CentOS、Debian 等）。一、Java…
阅读更多...
最新文章

Copyright @ 2022~2023