当前位置: 首页 > news >正文

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

最新款vite7+electron38+pinia3电脑端通用后台管理系统ElectronVue3Admin

electron38-vite7-admin最新版跨平台框架 Electron38 整合 Vite7+Vue3+ElementPlus 搭建高颜值轻量级客户端中后台管理系统解决方案。包含4种常用布局模板,支持vue-i18n多语言、标签栏路由,集合了图表、表格、表单、列表、编辑器等功能。

360截图20250927220232388

使用技术

  • 编辑器: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

p3

p4

项目特性

  1. 基于最新跨平台技术栈Electron38、Vite7、Vue3 setup、Pinia3、ElementPlus、Vue-I18n、Echarts
  2. 支持中英文/繁体三种国际化语言
  3. 支持动态权限路由、面包屑导航、快捷标签栏缓存路由
  4. electron38封装高复用多窗口管理
  5. 内置4种通用布局模板、自由变换风格
  6. 整合常用的表格、表单、列表、图表、编辑器、错误处理等业务模块
  7. 清爽简洁UI界面、轻量级可自由定制模板

p5

项目框架结构

electron-vue3-admin使用最新跨平台框架 Electron38+Vite7 创建项目框架模板。

360截图20250927220018264.png

Electron38-ViteAdmin桌面端后台系统已经更新到我的原创作品集,欢迎下载使用。

Electron38+Vue3+ElementPlus桌面端后台管理系统

p1

360截图20250927222955689

360截图20250927224625469

360截图20250927224300174

002360截图20250927231318284

项目入口配置

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')
})

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'] = trueconst 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()
})

360截图20250927220018271

p6

electron38-viteadmin通用布局模板

包含了4种通用布局模板,也可以在这个基础上定制扩展模板。

image

image

<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>
<!-- 布局模板(经典) --><script setup>import { appState } from '@/pinia/modules/app'import Toolbar from '@/layouts/components/Toolbar.vue'import Sidebar from '@/layouts/components/sidebar/index.vue'import Menus from '@/layouts/components/menus/index.vue'import Breadcrumb from '@/layouts/components/Breadcrumb.vue'import Tabview from '@/layouts/components/Tabview.vue'import Main from '@/layouts/components/Main.vue'const appstate = appState()
</script><template><div class="vuadmin__layout flexbox flex-col"><Toolbar /><div class="vuadmin__layout-body flex1 flexbox"><!-- 侧边栏 --><div class="vuadmin__layout-sidebar"><Sidebar /></div><!-- 菜单栏 --><div class="vuadmin__layout-menus" :class="{'hidden': appstate.config.collapsed}"><el-scrollbar><Menus :rootRouteEnable="false" /></el-scrollbar></div><!-- 右侧主内容区 --><div class="vuadmin__layout-main flex1 flexbox flex-col"><!-- 面包屑导航 --><Breadcrumb v-if="appstate.config.breadcrumb" /><!-- 标签页 --><Tabview v-if="appstate.config.tabview" /><!-- 内容区 --><Main /></div></div></div>
</template>

001360截图20250927225206724

002360截图20250927231007703

360截图20250927223731164

008360截图20250927234536887

009360截图20250927235108716

008360截图20250927234849127

005360截图20250927232508837

005360截图20250927232652477

010360截图20250927235449672

011360截图20250927235755916

011360截图20250927235850206

012360截图20250928000309723

013360截图20250928000443510

014360截图20250928000540946

016360截图20250928000837385

017360截图20250928000946641

019360截图20250928001325329

021360截图20250928001503536

024360截图20250928001656041

024360截图20250928001710752

025360截图20250928001742729

026360截图20250928001845136

image

electron38+vue3自定义无边框导航栏|拖拽窗口

image

image

image

image

image

image

<script setup>import { ref, markRaw } from 'vue'import { ElMessageBox } from 'element-plus'import { QuestionFilled, SwitchButton } from '@element-plus/icons-vue'import { isTrue } from '@/utils'import { authState } from '@/pinia/modules/auth'import { winSet } from '@/windows/actions'const authstate = authState()const props = defineProps({color: String,// 窗口是否可最小化
    minimizable: {type: [Boolean, String], default: true},// 窗口是否可最大化
    maximizable: {type: [Boolean, String], default: true},// 窗口是否可关闭
    closable: {type: [Boolean, String], default: true},// 层级
    zIndex: {type: [Number, String], default: 2024},})const hasMaximized = ref(false)// 初始监听窗口是否最大化
  window.electron.invoke('win-isMaximized').then(res => {hasMaximized.value = res})// 实时监听窗口是否最大化
  window.electron.on('win-maximized', (e, data) => {hasMaximized.value = data})// 最小化
  const handleWinMin = () => {// winSet('minimize', window.config.id)
    window.electron.invoke('win-min')}// 最大化/还原
  const handleWinToggle = () => {// winSet('max2min', window.config.id)
    window.electron.invoke('win-toggle').then(res => {hasMaximized.value = res})}// 关闭
  const handleWinClose = () => {if(window.config.isMajor) {ElMessageBox.confirm('是否最小化到系统托盘,不退出应用程序?', '', {type: 'warning',icon: markRaw(QuestionFilled),confirmButtonText: '退出应用',cancelButtonText: '最小化到托盘',customStyle: {'borderRadius': '8px'},roundButton: true,distinguishCancelAndClose: true,}).then(() => {authstate.logout()winSet('close')}).catch((action) => {if(action === 'cancel') {setTimeout(() => {winSet('hide', window.config.id)}, 250)}})}else {winSet('close', window.config.id)}}
</script><template><div class="ev__winbtns vu__drag" :style="{'z-index': zIndex}"><div class="ev__winbtns-actions vu__undrag" :style="{'color': color}"><a v-if="isTrue(minimizable)" class="wbtn min" title="最小化" @click="handleWinMin"><i class="wicon iconfont elec-icon-min"></i></a><a v-if="isTrue(maximizable)" class="wbtn toggle" :title="hasMaximized ? '向下还原' : '最大化'" @click="handleWinToggle"><i class="wicon iconfont" :class="hasMaximized ? 'elec-icon-restore' : 'elec-icon-max'"></i></a><a v-if="isTrue(closable)" class="wbtn close" title="关闭" @click="handleWinClose"><i class="wicon iconfont elec-icon-quit"></i></a></div></div>
</template>

多语言配置vue-i18n

image

electron-viteadmin支持中英文/繁体三种语言切换,支持自定义配置语言文件。

image

/*** 国际化配置* @author YXY*/import { createI18n } from 'vue-i18n'
import { appState } from '@/pinia/modules/app'// 引入语言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'// 默认语言
export const langVal = 'zh-CN'export default async (app) => {const appstate = appState()const lang = appstate.lang || langValappstate.setLang(lang)const i18n = createI18n({legacy: false,locale: lang,messages: {'en': enUS,'zh-CN': zhCN,'zh-TW': zhTW}})app.use(i18n)
}

ElectronVue3Admin自定义动图图表Hooks

项目种使用Echarts图表插件,采用element-resize-detector组件动态监听窗口DOM尺寸变化更新图表。

image

image

image

/*** 动态图表Hooks*/import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'export function useEcharts(el, options) {let chartEllet chartRef = ref(null)let erd = elementResizeDetectorMaker()const resizeHandle = () => {chartEl && chartEl.resize()}onMounted(() => {if(el?.value) {chartEl = echarts.init(el.value)chartEl.setOption(options)chartRef.value = chartEl}erd.listenTo(el.value, resizeHandle)})onBeforeUnmount(() => {chartEl.dispose()erd.removeListener(el.value, resizeHandle)})return chartRef
}

electron38+vue3路由标签栏tabview

image

image

<template><div class="vu__tabview"><el-tabsv-model="activeTab"class="vu__tabview-tabs"@tab-change="changeTabs"@tab-remove="removeTab"><el-tab-panev-for="(item, index) in tabList":key="index":name="item.path":closable="!item?.meta?.isAffix"><template #label><el-dropdown ref="dropdownRef" trigger="contextmenu" :id="item.path" @visible-change="handleDropdownChange($event, item.path)" @command="handleDropdownCommand($event, item)"><span class="vu__tabview-tabs__label"><span>{{$t(item?.meta?.title)}}</span></span><template #dropdown><el-dropdown-menu><el-dropdown-item command="refresh" :icon="Refresh">{{$t('tabview__contextmenu-refresh')}}</el-dropdown-item><el-dropdown-item command="close" :icon="Close" :disabled="item.meta.isAffix">{{$t('tabview__contextmenu-close')}}</el-dropdown-item><el-dropdown-item command="closeOther" :icon="Switch">{{$t('tabview__contextmenu-closeother')}}</el-dropdown-item><el-dropdown-item command="closeLeft" :icon="DArrowLeft">{{$t('tabview__contextmenu-closeleft')}}</el-dropdown-item><el-dropdown-item command="closeRight" :icon="DArrowRight">{{$t('tabview__contextmenu-closeright')}}</el-dropdown-item><el-dropdown-item command="closeAll" :icon="CircleCloseFilled">{{$t('tabview__contextmenu-closeall')}}</el-dropdown-item></el-dropdown-menu></template></el-dropdown></template></el-tab-pane></el-tabs></div>
</template>

面包屑导航栏

image

<script setup>import { computed } from 'vue'import { Fold, Expand } from '@element-plus/icons-vue'import { appState } from '@/pinia/modules/app'import { useRoutes } from '@/hooks/useRoutes'const props = defineProps({// 是否显示展开/收缩
    collapseEnable: { type: Boolean, default: true },})const appstate = appState()const { getMatchRoute } = useRoutes()const matchRoute = computed(() => getMatchRoute())const handleCollapse = () => {appstate.config.collapsed = !appstate.config.collapsed}
</script><template><div class="vu__breadcrumb flexbox"><el-icon v-if="collapseEnable" :title="appstate.config.collapsed ? '展开' : '收缩'" @click="handleCollapse"><Expand v-if="appstate.config.collapsed" /><Fold v-else /></el-icon><el-breadcrumb separator="/"><el-breadcrumb-item v-for="(item, index) in matchRoute" :key="index"><router-link v-if="item.path" :to="item.path">{{$t(item?.meta?.title)}}</router-link><template v-else>{{$t(item?.meta?.title)}}</template></el-breadcrumb-item></el-breadcrumb></div>
</template>

Okay,以上就是Electron38+Vue3搭建客户端中后台管理系统的一些项目分享,希望对大家有点帮助~

最后附上几个最新实战项目

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

vite7-webos网页版os管理|Vue3+Vite7+ArcoDesign搭建pc端os后台系统

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用

Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】

flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例

uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板

20190904-095146-5b53

 

http://www.hskmm.com/?act=detail&tid=19709

相关文章:

  • 长江中游干流河道崩岸特征与机理研究综述
  • 基于 Python Keras 建立 猫狗图像的精准分类
  • 《ESP32-S3使用指南—IDF版 V1.6》第四十章 图片显示实验
  • 调度算法II
  • 鸿蒙应用开发从入门到实战(十六):线性布局案例
  • SQL注入流程
  • 完整的GLFW应用程序示例
  • 物理笔记
  • 基于Python+Vue开发的商城管理系统源码+运行步骤
  • HTML5-和-CSS3-迁移即时入门-全-
  • HTML5-多人游戏开发-全-
  • HTML5-地理位置即时操作指南-全-
  • 搭建环境
  • 20250928
  • Easysearch 国产替代 Elasticsearch:8 大核心挑战解读
  • Typescript概述和思维导图
  • 9-28
  • Qt结合ffmpeg代码实现udp推流/组播推流/rtp推流/监控GB28181推流/onvif推流
  • linux防火墙firewalld
  • 很多大公司为什么禁止在SpringBoot项目中使用Tomcat?
  • Java作业动手又动脑
  • PHP 开发者必须掌握的基本 Linux 命令
  • MetaGPT实战指南:构建模拟公司运营的多智能体系统 - 教程
  • Timeplus Enterprise 3.0 (Linux, macOS) - 流处理平台
  • 《HelloGitHub》第 114 期
  • Splunk Enterprise 10.0.1 (macOS, Linux, Windows) - 搜索、分析和可视化,数据全面洞察平台
  • 读后感
  • 读后感3
  • 读后感2
  • [Luogu 13345] EGOI 2025:IMO