Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

基于electron32+vue3 setup+pinia2桌面端os管理解决方案ElectronVue3OS。
vue3-electron32-os全新原创Electron32+Vite5+Vue3+Pinia2+ArcoDesign+Echarts+Swiper搭建桌面版os管理模板。内置macos+windows两种桌面布局风格、自研可拖拽式栅格布局模板引擎、支持JSON动态配置桌面菜单/Dock菜单。

技术栈

• 编辑器：vscode
  
• 技术框架：vite^5.4.1+vue^3.4.37+vue-router^4.4.3
  
• 跨平台框架：electron^32.0.1
  
• 组件库：@arco-design/web-vue^2.56.0 (字节前端vue3组件库)
  
• 状态插件：pinia^2.2.2
  
• 拖拽插件：sortablejs^1.15.2
  
• 图表组件：echarts^5.5.1
  
• markdown编辑器：md-editor-v3^4.19.2
  
• 模拟数据：mockjs^1.1.0
  
• 打包构建：electron-builder^24.13.3
  
• electron+vite插件：vite-plugin-electron^0.28.7
  

项目特色

• Electron32封装高性能多开窗口管理
  
• 支持macos/windows两种桌面模板风格
  
• 支持动态json配置桌面菜单和Dock菜单
  
• 自研栅格化拖拽布局引擎
  
• 支持自定义桌面主题壁纸、全场景高斯模糊UI质感
  
• 支持主窗口和新开窗口打开路由页面
  

项目框架结构

electron-vite-macos使用 vite5.x 整合 electron32 搭建项目框架模板，遵循 Vue3 setup 语法糖编码风格。

目前Electron32-Vue3-Macos桌面端os系统已经同步到我的原创作品集。

自研electron32+vite5+arco-design客户端os系统管理平台

入口配置main.js

1. /**
2. * 渲染进程配置入口main.js
3. * @author andy
4. */
6. import { createApp } from 'vue'
7. import './style.scss'
8. import App from './App.vue'
10. import { launchApp } from '@/windows/actions'
12. // 引入路由及状态管理
13. import Router from './router'
14. import Pinia from './pinia'
16. // 引入插件
17. import Plugins from './plugins'
19. launchApp().then(config => {
20.   if(config) {
21.     // 全局窗口配置
22.     window.config = config
23.   }
25.   // 初始化app实例
26.   createApp(App)
27.   .use(Router)
28.   .use(Pinia)
29.   .use(Plugins)
30.   .mount('#app')
31. })

复制代码

electron-os桌面布局结构

内置提供了macos和windows两种风格桌面模板。

1. <template>
2.   
3.     <component :is="DeskLayout[appstate.config.layout]" />
4.   
5. </template>

复制代码

1. <template>
2.   
3.     <component :is="DeskLayout[appstate.config.layout]" />
4.   
5. </template><template>
6.   
7.     <component :is="DeskLayout[appstate.config.layout]" />
8.   
9. </template><template>
10.   
11.     <component :is="DeskLayout[appstate.config.layout]" />
12.   
13. </template><template>
14.   
15.     <component :is="DeskLayout[appstate.config.layout]" />
16.   
17. </template><template>
18.   
19.     <component :is="DeskLayout[appstate.config.layout]" />
20.   
21. </template>      

复制代码

electron-os桌面栅格模板

桌面图标自定义变量

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

复制代码

自定义桌面json配置项

1. /**
2.   * label 图标标签
3.   * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont字体图标
4.   * path 跳转路由地址
5.   * link 跳转外部链接
6.   * hideLabel 是否隐藏图标标签
7.   * background 自定义图标背景色
8.   * color 自定义图标颜色
9.   * size 栅格布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
10.   * onClick 点击图标回调函数
11.   * children 二级菜单配置<br>  * isNewin 新窗口打开路由页面
12.   */

复制代码

桌面菜单JSON配置示例

1. const deskMenu = [  {    uid: 'd137f210-507e-7e8e-1950-9deefac27e48',    list: [      {imgico: markRaw(Today), size: '2x2'},      {label: '日历', imgico: markRaw(Calendar3x3), size: '3x3'},      {label: 'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},      // ...    ]  },  {    uid: 'g270f210-207e-6e8e-2650-9deefac27e48',    list: [      {label: 'Appstore', imgico: '/static/mac/appstore.png'},      // ...    ]  },  {    uid: 't165f210-607e-4e8e-9950-9deefac27e48',    list: [      {label: 'Vue.js', imgico: '/vue.svg', link: 'https://vuejs.org/',},      {label: 'Vite.js官方文档', imgico: '/vite.svg', link: 'https://vitejs.dev/',},      // ...    ]  },  {    uid: 'u327f210-207e-1e8e-9950-9deefac27e48',    list: [      {label: 'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},      {label: '首页', imgico: markRaw(IconHome), path: '/home', color: '#fff', isNewin: true},      {label: '工作台', imgico: 'elec-icon-dotchart', path: '/home/dashboard', color: '#fff'},      // ...      {<template>
2.   
3.     <component :is="DeskLayout[appstate.config.layout]" />
4.   
5. </template>label: '用户中心',<template>
6.   
7.     <component :is="DeskLayout[appstate.config.layout]" />
8.   
9. </template>children: [<template>
10.   
11.     <component :is="DeskLayout[appstate.config.layout]" />
12.   
13. </template>  {label: '主页', imgico: '/static/svg/ucenter.svg', path: '/setting'},<template>
14.   
15.     <component :is="DeskLayout[appstate.config.layout]" />
16.   
17. </template>  {label: '用户管理', imgico: markRaw(IconUserGroup), path: '/user', color: '#fff'},<template>
18.   
19.     <component :is="DeskLayout[appstate.config.layout]" />
20.   
21. </template>  // ...<template>
22.   
23.     <component :is="DeskLayout[appstate.config.layout]" />
24.   
25. </template>]      },      {<template>
26.   
27.     <component :is="DeskLayout[appstate.config.layout]" />
28.   
29. </template>label: '设置',<template>
30.   
31.     <component :is="DeskLayout[appstate.config.layout]" />
32.   
33. </template>children: [<template>
34.   
35.     <component :is="DeskLayout[appstate.config.layout]" />
36.   
37. </template>  // ...<template>
38.   
39.     <component :is="DeskLayout[appstate.config.layout]" />
40.   
41. </template>]      },      {<template>
42.   
43.     <component :is="DeskLayout[appstate.config.layout]" />
44.   
45. </template>label: '收藏网址',<template>
46.   
47.     <component :is="DeskLayout[appstate.config.layout]" />
48.   
49. </template>children: [<template>
50.   
51.     <component :is="DeskLayout[appstate.config.layout]" />
52.   
53. </template>  {label: 'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},<template>
54.   
55.     <component :is="DeskLayout[appstate.config.layout]" />
56.   
57. </template>  {label: 'Vite.js', imgico: '/vite.svg',},<template>
58.   
59.     <component :is="DeskLayout[appstate.config.layout]" />
60.   
61. </template>  // ...<template>
62.   
63.     <component :is="DeskLayout[appstate.config.layout]" />
64.   
65. </template>]      },      {<template>
66.   
67.     <component :is="DeskLayout[appstate.config.layout]" />
68.   
69. </template>label: '公众号', imgico: '/static/qrimg.png', color: '#07c160',<template>
70.   
71.     <component :is="DeskLayout[appstate.config.layout]" />
72.   
73. </template>onClick: () => {<template>
74.   
75.     <component :is="DeskLayout[appstate.config.layout]" />
76.   
77. </template>  Modal.info({<template>
78.   
79.     <component :is="DeskLayout[appstate.config.layout]" />
80.   
81. </template>    // ...<template>
82.   
83.     <component :is="DeskLayout[appstate.config.layout]" />
84.   
85. </template>  })<template>
86.   
87.     <component :is="DeskLayout[appstate.config.layout]" />
88.   
89. </template>}      },    ]  }]

复制代码

electron32+vue3实现Dock菜单

dock菜单支持如下参数配置

1. /**
2.   * label 图标tooltip提示
3.   * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标
4.   * path 跳转路由页面
5.   * link 跳转外部链接
6.   * color 自定义图标颜色
7.   * onClick 点击图标回调函数
8.   * children 二级菜单
9.   * isNewin 是否新窗口打开路由页面
10.   */

复制代码

OK，以上就是electron32+vue3实战开发桌面端os系统的一些知识分享，希望对大家有所帮助哈~
Electron打包下载卡顿问题

electron打包进度卡住，下载停滞不前，设置electron淘宝镜像源依然无效，可以尝试下面方法。
直接去 https://registry.npmmirror.com/binary.html 下载相关文件。

下载对应的electron版本文件。

直接将下载的electron打包文件放到C盘下 C:\Users\andy\AppData\Local\electron\Cache

通过手动下载打包文件，electron打包时就跳过下载步骤，很快就能打包成功了。
vite.config.js配置@/无路径提示解决方法

安装如下方式配置vscode的@路径提示

• vscode安装Path Intellisense插件
  
• 点击左下角齿轮，点击设置
  
• 点击右上角这个图标
  

配置如下代码

1. "path-intellisense.mappings": {
2.     "@": "${workspaceFolder}/src"
3. }

复制代码

保存退出，@/就会有路径提示了。
最后附上两个最新Electron+Vite5实例项目
https://www.cnblogs.com/xiaoyan2017/p/18290962
https://www.cnblogs.com/xiaoyan2017/p/18366451
最新跨平台实战项目集。

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！