Tauri2.0+vue3-os：原创vite6+tauri2+arco-design客户端OS桌面管理

xiaoyan2015 的个人博客 / 60 / 0 / 创建于 4个月前

重磅新作 tauri2.1+vue3 setup+pinia2+arco.design 跨平台仿 macos 和 windows 桌面 os 系统。

使用技术#

编码器：VScode
技术框架：vite^6.0.3+vue^3.5.13+vue-router^4.5.0
跨平台框架：tauri^2.1.1
UI 组件库：@arco-design/web-vue^2.56.3 (字节桌面版 vue3 组件库)
状态管理：pinia^2.3.0
拖拽插件：sortablejs^1.15.6
滑动分屏插件：swiper^11.1.15
图表组件：echarts^5.5.1
markdown 编辑器：md-editor-v3^5.1.1
模拟数据：mockjs^1.1.0

项目特点#

基于 tauri2.0 封装新窗口管理
支持 macos 和 windows 两种桌面风格
支持自定义 json 配置桌面菜单和 Dock 菜单
自研桌面栅格化拖拽布局引擎
支持自定义桌面个性化壁纸、全场景毛玻璃虚化 UI 质感
支持宿主窗口和独立新开窗口打开路由页面

tauri2-vue3os 桌面 os 系统已经同步到原创作品集。#
gf.bilibili.com/item/detail/110762...

项目结构目录#

tauri2-os 基于 Tauri2.0 跨平台框架结合 Vite6.0 构建项目模板。

tauri2-os 桌面模板#

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