vue3+electron32+arco.design桌面端os模板|vite5+electron32仿mac/win客户端os程序

原创基于electron32.x+vite5+vue3 setup+pinia2+arco-design实战开发全新桌面版os后台管理系统解决方案Vue3ElectronOS。内置了macos和windows两种风格桌面模板，自研可拖拽栅格布局桌面。

自研Electron32+Vite5+ArcoDesign桌面OS管理系统

运用技术

• 开发工具：VScode
• 技术框架：vite^5.4.1+vue^3.4.37+vue-router^4.4.3
• 跨平台框架：electron^32.0.1
• UI组件库：@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

基于electronjs封装高性能窗口多开器，采用自研栅格化拖拽布局引擎。

项目结构框架

electron32-winos基于vite.js整合最新跨平台技术electron32.x搭建项目模板。

目前electron32-vue3-os桌面os已经发布到我的原创作品集。
https://gf.bilibili.com/item/detail/1106958011

Electron主线程配置

/**  
 * electron主线程配置  
 * @author andy  
 */  

import { app, BrowserWindow } from 'electron'  

import { WindowManager } from '../src/windows/index.js'  

// 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy)  
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true  

const createWindow = () => {  
  let win = new WindowManager()  
  win.create({isMajor: true})  
  // 系统托盘管理  
  win.trayManager()  
  // 监听ipcMain事件  
  win.ipcManager()  
}  

app.whenReady().then(() => {  
  createWindow()  

  app.on('activate', () => {  
    if(BrowserWindow.getAllWindows().length === 0) createWindow()  
  })  
})  

app.on('window-all-closed', () => {  
  if(process.platform !== 'darwin') app.quit()  
})

入口文件main.js

import { createApp } from 'vue'  
import './style.scss'  
import App from './App.vue'  

import { launchApp } from '@/windows/actions'  

// 引入路由及状态管理  
import Router from './router'  
import Pinia from './pinia'  

// 引入插件  
import Plugins from './plugins'  

launchApp().then(config => {  
  if(config) {  
    // 全局窗口配置  
    window.config = config  
  }  

  // 初始化app实例  
  createApp(App)  
  .use(Router)  
  .use(Pinia)  
  .use(Plugins)  
  .mount('#app')  
})

electron32-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" :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>

electron32-os桌面栅格模板

桌面json菜单配置项

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

桌面菜单示例代码

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'},  
      // ...  
      {  
        label: '用户中心',  
        children: [  
          {label: '主页', imgico: '/static/svg/ucenter.svg', path: '/setting'},  
          {label: '用户管理', imgico: markRaw(IconUserGroup), path: '/user', color: '#fff'},  
          // ...  
        ]  
      },  
      {  
        label: '设置',  
        children: [  
          // ...  
        ]  
      },  
      {  
        label: '收藏网址',  
        children: [  
          {label: 'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},  
          {label: 'Vite.js', imgico: '/vite.svg',},  
          // ...  
        ]  
      },  
      {  
        label: '公众号', imgico: '/static/qrimg.png', color: '#07c160',  
        onClick: () => {  
          Modal.info({  
            // ...  
          })  
        }  
      },  
    ]  
  }  
]

Okay，综上就是electron32+vue3开发桌面端os系统的一些知识分享。

作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000045245775
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。