2026最新款！tauri2.12+vue3+arcoDesign重写客户端os系统

原创

andy2018

发布于 2026-10-27 21:38:57

690

文章被收录于专栏：h5h5

如果觉得Electron太臃肿，试试这款最新研发的tauri2.12+vite8+pinia4+arco-design跨桌面端os平台系统。深度封装 Tauri 2 多开窗口管理，内置 macOS / Windows 两套桌面模板。

项目知识点

跨平台框架：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

项目功能特性

基于 Tauri 2.12、Vite 8、Vue 3、Pinia 4 构建，享受极致开发体验。
桌面菜单 + Dock 栏均通过 JSON 配置，增删不改代码
自研桌面卡片引擎，支持拖拽排序
自定义桌面背景，高斯模糊毛玻璃效果
内置图表、表格、列表、表单、编辑器等常用业务模板
同一路由可配置在主窗口内打开或弹出独立新窗口

项目结构目录

入口配置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")

tauri-vite-os桌面端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>

tauri-vue3-os桌面栅格布局

const deskVariable = ref({
    '--icon-radius': '10px', // 圆角
    '--icon-size': '60px', // 图标尺寸
    '--icon-gap-col': '30px', // 水平间距
    '--icon-gap-row': '30px', // 垂直间距
    '--icon-labelSize': '12px', // 标签文字大小
    '--icon-labelColor': '#fff', // 标签颜色
    '--icon-fit': 'contain', // 图标自适应模式
})

支持如下参数配置

/**
 * @name Desk桌面菜单配置参数
 * @param label 图标标题
 * @param imgico 图标(本地或网络图片) 支持Arco-Design内置图标或自定义iconfont图标
 * @param path 跳转路由页面
 * @param link 跳转外部链接
 * @param hideLabel 是否隐藏图标标题
 * @param filter 是否禁用拖拽
 * @param background 自定义图标背景色
 * @param color 自定义图标颜色
 * @param size 栅格磁贴布局 1x1 ... 12x12
 * @param padding 内边距
 * @param onClick 点击图标回调函数
 * @param isNewin 新窗口打开路由页面
 * @param children 二级菜单
 */