Tauri2.12真香！包体积直降90%！最新版tauri2.12+vite8+pinia4+arcoDesign极速构建高颜值桌面版os框架系统。内置 macOS / Windows 两套桌面模板。

项目技术知识

• 编辑器：Vscode
  
• 跨平台框架：Tauri^2.12.5
  
• 前端技术框架：vite^8.3.5+vue^3.5.43+vue-router^5.4.0
  
• 组件库：@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

项目框架结构

基于最新版vite8.x+tauri2.12搭建极速跨平台桌面os框架。

项目预览下载👇

前端入口配置

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

<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-Vue3OS布局结构

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

tauri2.12+vite8+pinia4+arco-design从0-1手搓重写桌面客户端os系统就分享这么多，希望对大家有些帮助！

更多精选原创实战项目模板，欢迎来我小店看看👇👇

Tauri 2.12 + Vite 8 + Vue 3 重构 Admin 实战，包体缩了 92%

仿微信桌面客户端:Vite8+Tauri2.12+Vue3+Pinia4打造聊天系统

原创vite8+vue3.5+arco-design网页版webos管理系统模板

2026/6升级版Flutter3.41.5桌面级OS管理系统

Flutter3.41实战抖音直播+短视频+聊天

首发vite8.0+vue3+deepseek+markdown手搓网页版ai流式生成模板

Tauri2.9+Vue3实战电脑版OS系统|vite7.2+tauri2仿mac/wins桌面管理os模板

Electron38.2实战客户端OS系统|vite7+vue3+electron仿mac/wins桌面

Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe

最新研发vite7.0+electron38客户端仿微信EXE聊天软件

首款react19+electron41+antd高颜值桌面客户端中后台admin系统框架

React19+Electron聊天室|electron41跨平台仿微信EXE客户端|react聊天程序