最新研发electron38+vue3+arco客户端os管理系统Exe最新原创Electron38.2+Vite7+V

2025自研新作electron38.2+vite7+vue3 setup+arco电脑端os后台系统。

004360截图20251010234314484.png

002360截图20251010230146790.png

项目知识点

跨平台框架：electron^38.2.0
前端技术框架：vite^7.1.7+vue^3.5.21+vue-router^4.5.1
组件库：@arco-design/web-vue^2.57.0
状态管理：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

vite7-electron38-os桌面版OS管理系统使用最新跨平台框架Electron38.2.0整合Vite7.1.7搭建项目模板。

360截图20251010223344923.png

001360截图20251010232356569.png

002360截图20251010225006016.png

002360截图20251010225040575.png

002360截图20251010225202104.png

002360截图20251010225357519.png

024360截图20251011091106828.png

024360截图20251011091444081.png

桌面布局模板

e5e5005ded3a2333424c97790bb21140_1289798-20251012000214148-268254914.png

<!-- 桌面模板 -->

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