2025最新款Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe
【摘要】 2025最新原创研发electron38+vite7+vue3+pinia3+elementPlus电脑端通用后台管理系统ElectronVue3Admin。
经过两周爆肝研发,最新款跨平台electron38+vite7+vue3搭建电脑端后台admin系统模板。


使用技术
- 跨平台框架: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



项目结构框架
使用最新跨平台框架Electron38搭配Vite7构建工具搭建项目模板。整个项目采用vue3 setup语法糖编码开发。









项目入口文件
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'] = true
const 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()
})












项目布局模板

如上图:提供4种常用布局模板。
<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>

以上就是electron38+vue3搭建客户端后台管理系统的一些项目分享,希望对大家有点帮助~
最新研发vite7.0+electron38客户端仿微信EXE聊天软件
原创tauri2.0+vue3.5+element-plus桌面版后台管理系统
Electron32-Vite5-OS跨平台os模板|electron32+vue3通用os系统
Flutter3.32实战桌面端OS系统|flutter3仿macOS桌面
flutter3.27跨平台仿微信客户端聊天Exe程序|朋友圈|短视频
原创uniapp+vite5+vue3+uv-ui跨三端短视频+直播+聊天app应用
uni-app+deepseek-v3跨三端ai流式输出对话模板
flutter3+deepseek手机端ai流式输出聊天模板
实战跨平台Electron35+DeepSeek-V3搭建客户端AI模板
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)