最新版electron38.2+vite7+vue3+arco搭建桌面端os管理模板

[xiaoyan_2018]

2025最新原创实战Electron38.2+Vite7.1+Vue3 setup+ArcoDesign+Echarts仿macos+windows风格桌面电脑端OS系统解决方案。

技术框架 

• 跨平台框架：electron^38.2.0
• 前端技术框架：vite^7.1.7+vue^3.5.21+vue-router^4.5.1
• 组件库：@arco-design/web-vue^2.57.0 (字节前端vue3组件库)
• 状态管理：pinia^3.0.3
• 拖拽插件：sortablejs^1.15.6
• 图表组件：echarts^6.0.0
• markdown编辑器：md-editor-v3^6.0.1
• 模拟数据：mockjs^1.1.0
• 打包构建：electron-builder^24.13.3
• electron+vite插件：vite-plugin-electron^0.29.0 

项目特性

1. Electron38封装高复用多开窗口管理
2. 支持macOS/windows两种桌面风格模式
3. 支持自定义json配置桌面菜单和Dock菜单
4. 自研桌面栅格化拖拽布局引擎
5. 自定义桌面个性化壁纸、全场景毛玻璃模糊效果
6. 支持独立新开窗口打开路由页面 

项目框架结构 

桌面布局模板 

 

内置了macos和window两种风格桌面。

<!-- 桌面模板 -->

<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" :style="{'--themeSkin': appstate.config.skin}">
    <component :is="DeskLayout[appstate.config.layout]" />
  </div>
</template>

 

 

<script setup>
  import Wintool from '@/layouts/components/wintool/index.vue'
  import Desk from '@/layouts/components/mac/desk.vue'
  import Dock from '@/layouts/components/mac/dock.vue'
</script>

<template>
  <div class="vu__layout flexbox flex-col">
    <div class="vu__layout-header">
      <Wintool />
    </div>
    <div class="vu__layout-body flex1 flexbox">
      <Desk />
    </div>
    <div class="vu__layout-footer">
      <Dock />
    </div>
  </div>
</template>

想要了解更多的项目介绍，可以去看看下面的这篇文章。

https://blog.csdn.net/yanxinyun1990/article/details/153213880