基于Electron38+Vite7.1+Vue3+Pinia3+ElementPlus电脑端admin后台管理模板

2025-09-29 34

版权

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

本文涉及的产品

可观测可视化 Grafana 版，10个用户账号 1个月

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

MSE Nacos/ZooKeeper 企业版试用，1600元额度，限量50份

简介： 基于最新版跨平台框架Electron38整合Vite7+Vue3+ElementPlus搭建轻量级客户端中后台管理系统解决方案。

2025最新实战研发vite7.1+electron38+vue3.5+pinia3+elementPlus桌面客户端通用后台admin管理系统。

360截图20250927225006085.png

002360截图20250927231630898.png

electron38-vite7-admin包含4种常用布局模板，支持vue-i18n多语言、标签栏路由，集合了图表、表格、表单、列表、编辑器等功能。

技术知识点

编辑器：VScode
跨平台框架：electron^38.1.2
前端框架技术：vite^7.1.7+vue^3.5.21+vue-router^4.5.1
组件库：element-plus^2.11.3
状态管理：pinia^3.0.3
国际化方案：vue-i18n^11.1.12
图表组件：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截图20250927220232388.png 001360截图20250927225249692.png 002360截图20250927231007703.png 002360截图20250927231318284.png 002360截图20250927231433377.png 002360截图20250927231545403.png

项目结构目录

electron38-vue3admin使用最新跨平台技术Electron38整合Vite7构建工具搭建项目模板。

360截图20250927220018264.png.png

通用布局模板

f421c9b8f945563a663c8bc876bb3b7e_1289798-20250928084102365-861716096.png

如上图：内置4种通用布局模板。也可以在此基础拓展定制模板。

ac7f37e36c4a7d36e67f2c83fd5a35a4_1289798-20250928084157925-768517553.png

<script setup>
  import { appState } from '@/pinia/modules/app'

  // 引入布局模板
  import Classic from './template/classic/index.vue'
  import Columns from './template/columns/index.vue'
  import Vertical from './template/vertical/index.vue'
  import Horizontal from './template/horizontal/index.vue'

  const appstate = appState()

  const LayoutMap = {
    'classic': Classic,
    'columns': Columns,
    'vertical': Vertical,
    'horizontal': Horizontal
  }
</script>

<template>
  <div class="vuadmin__container" :style="{'--themeSkin': appstate.config.skin}">
    <component :is="LayoutMap[appstate.config.layout]" />
  </div>
</template>

003360截图20250927231943953.png 008360截图20250927234822853.png 009360截图20250927235226124.png 011360截图20250927235755916.png 012360截图20250928000309723.png 014360截图20250928000540946.png 016360截图20250928000837385.png 017360截图20250928000946641.png 018360截图20250928001133978.png 020360截图20250928001421752.png 024360截图20250928001656041.png 025360截图20250928001742729.png 026360截图20250928001858352.png