最新实战Tauri2.9+Vite7+Vue3+Arco高颜值桌面版OS系统基于最新跨平台技术tauri2.9+vite

2025最新款跨平台tauri2.9+vite7.2+pinia3+arco-design搭建客户端os后台管理系统。

002360截图20251116225322181.png

360截图20251116223719590.png

项目知识点

开发工具：VScode
跨平台框架：tauri^2.9
前端框架：vite^7.2.2+vue^3.5.24+vue-router^4.6.3
UI组件库：@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

vite7-tauri2-vue3os电脑端os系统使用最新跨平台框架Tauri2.9整合Vite7.2搭建项目模板，采用vue3 setup语法糖编码页面。

360截图20251116213614042.png

项目桌面模板

476e44197574e2ccf1278732618d8c50_1289798-20251117223242638-521043888.png

如上图：支持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>

d32c130ba90674bdae6c4bfef1a0f629_1289798-20251117225352259-1349196573.png

5732249a77b2ed77e29526480c4cdfc7_1289798-20251117225408063-478243333.png

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