Tauri2.9+Vite7.2客户端OS系统|tauri2+vue3 setup+arco桌面os后台模板

xiaoyan2015 的个人博客 / 2 / 0 / 创建于 3小时前

AI摘要

本文介绍了基于Tauri 2.9、Vite 7.2、Vue 3和Arco Design构建的跨平台桌面OS管理系统。项目采用现代化技术栈，支持macOS和Windows双平台界面切换，并集成了拖拽、图表、Markdown编辑等核心功能模块。这是一个完整的技术方案分享。

最新研发tauri2.9+vite7.2+vue3+arco-design桌面电脑端OS管理系统Tauri2OS。

项目技术框架

跨平台技术：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

项目框架目录

基于最新版跨平台框架Tauri2.9整合Vite7.2搭建项目模板。

tauri2-vue3-os客户端os系统已经更新到我的原创作品小铺。
tauri2.9+vite7+arco-design桌面端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>