原创Electron38.2+Vite7+Vue3+Pinia3+ArcoDesign客户端os管理系统模板

2025-10-12 135

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

云原生网关 MSE Higress，422元/月

应用实时监控服务-应用监控，每月50GB免费额度

可观测监控 Prometheus 版，每月50GB免费额度

简介： 2025最新版原创研发Electron38.2+Vite7+Vue3 setup+ArcoDesign+Echarts仿MacOS/Wins风格桌面客户端OS系统解决方案。

2025最新实战研发vite7.1+electron38.2+vue3.5+pinia3+arcoDesign桌面客户端仿macOS/windows管理系统。

002360截图20251010225357519.png 002360截图20251010230146790.png

electron38-vue3-osadmin支持macos/windows风格。提供了表格、表单、图表、列表、编辑器、错误处理等后台业务场景。

项目知识点

开发工具：VScode
跨平台框架：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

360截图20251010215857616.png

项目框架结构

electron38-vue3os使用最新跨平台技术Electron38+Vite7构建项目模板。

360截图20251010223344923.png

002360截图20251010225006016.png 002360截图20251010225040575.png 002360截图20251010225202104.png 002360截图20251010225357520.png 002360截图20251010233227194.png 002360截图20251010233413426.png

项目入口文件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')
})

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

9d20d58adc5e2f374eb8e6f7f85359d1_1289798-20251012000635940-705630857.png

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

005360截图20251010234826015.png 006360截图20251010235823142.png 007360截图20251011000012782.png 008360截图20251011000435357.png 008360截图20251011000603301.png 009360截图20251011000722805.png 009360截图20251011000855789.png 010360截图20251011001137524.png 010360截图20251011001311035.png 011360截图20251011001615754.png 013360截图20251011002036842.png 014360截图20251011002507985.png 015360截图20251011002640539.png 020360截图20251011080353733.png 024360截图20251011091106828.png 024360截图20251011091628969.png 024360截图20251011091748523.png