首创electron32+vue3+arco-design+pinia2桌面端os后台系统解决方案

最新原创自研Electron32.x+Vite5跨平台桌面os模板ElectronVue3OS。

ElectronViteOS基于Electron32+Vite5+Vue3+Pinia2+ArcoDesign+Echarts创建桌面版os后台系统模板。内置macos和windows两种桌面布局模板、自研可拖拽式栅格布局模板引擎。

使用技术

• 编辑器：vscode
• 技术框架：vite^5.4.1+vue3.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
• 模拟数据：mockjs^1.1.0
• 打包构建：electron-builder^24.13.3
• electron+vite插件：vite-plugin-electron^0.28.7

项目结构目录

使用vite.js初始化项目模板，整合最新版electron32.x跨平台技术。

electron32-os桌面模板

/**
 * 桌面布局模板
 * @author Andy Q：282310962
*/

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

electron-vue3os栅格布局

桌面图标支持如下参数配置

/**
  * 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 新窗口打开路由页面
  */

OK，以上就是electron32.x+vite5+arco-design实战开发桌面版os系统的一些项目分享。