仅15MB！Tauri2.12+Vite8+Vue3+ArcoDesign重写桌面OS系统

2026/10全新升级tauri2.12+vue3+pinia4高颜值客户端仿macOS管理系统。

Electron太重？我用 Tauri 2.12 + Vite 8 + Vue3 + Arco Design 重构桌面 OS 管理系统，包体积骤降 90%！支持macOS和windows两种桌面风格，可拖拽桌面菜单/dock工具条。涵盖图表、表格、表单、编辑器、异常页等常用业务组件。

全新升级tauri2.12+vite8+vue3+pinia4+elementPlus仿微信/QQ聊天软件

实现技术

开发工具：vscode
跨平台框架：tauri^2.12.5
前端技术框架：vite^8.3.5+vue^3.5.43+vue-router^5.4.0
UI组件库：@arco-design/web-vue^2.59.0
状态管理：pinia^4.1.0
拖拽组件：sortablejs^1.15.7
滑屏插件：swiper^14.3.0
图表组件：echarts^6.1.0
markdown编辑器：md-editor-v3^7.1.0
模拟数据：mockjs^1.1.0

功能特性

🚀 前沿技术栈 — 基于 Tauri 2.12、Vite 8、Vue 3、Pinia 4 构建，享受极致开发体验。
🖥️ 多窗口管理 — 深度封装 Tauri 2 多开窗口管理，支持主窗口与独立窗口自由切换
🎨 双平台风格 — 内置 macOS / Windows 两套桌面模板
🧩 JSON 驱动菜单 — 桌面菜单 + Dock 栏均通过 JSON 配置，增删不改代码
🧱 拖拽栅格布局 — 自研桌面卡片引擎，支持拖拽排序
🌫️ 毛玻璃皮肤 — 自定义桌面背景，高斯模糊毛玻璃效果
📦 页面模板齐全 — 内置图表、表格、列表、表单、编辑器等常用业务模板
🔀 路由即窗口 — 同一路由可配置在主窗口内打开或弹出独立新窗口

项目目录结构

基于最新版tauri2.12+vite8构建极速跨平台框架模板。

Tauri2.12-Vue3-MacOS桌面端OS系统已经发布到原创作品小店。

tauri2.12+vite8+arco-design桌面端OS管理系统

项目入口main.js

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

App.vue模板

<script setup>
  import { onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
  import { Loaded } from '@/plugins/loaded'

  const router = useRouter()

  Loaded()

  onMounted(async() => {
    try {
      const win = getCurrentWebviewWindow()
      // 确保初始导航就绪
      await router.isReady()
      await win.show()
      await win.unminimize()
      await win.setFocus()
    } catch (err) {
      console.warn('[window] 初始化窗口失败:', err)
    }
  })
</script>

<template>
  <router-view />
</template>

Tauri-Vue3-OS桌面布局

支持macOS和windows两种布局风格。

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

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