2025最新款Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe

举报
yxybox 发表于 2025/09/29 21:47:33 2025/09/29
【摘要】 2025最新原创研发electron38+vite7+vue3+pinia3+elementPlus电脑端通用后台管理系统ElectronVue3Admin。

经过两周爆肝研发,最新款跨平台electron38+vite7+vue3搭建电脑端后台admin系统模板。


003360截图20250927231943953.png

360截图20250927223442641.png


使用技术

  • 跨平台框架: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


p2.gif

p3.gif

p5.gif


项目结构框架

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


360截图20250927220018261.png

360截图20250927220232388.png

360截图20250927223231855.png

360截图20250927223731164.png

360截图20250927224221467.png

001360截图20250927225206724.png

008360截图20250927234822853.png

008360截图20250927234849127.png

009360截图20250927235108716.png


项目入口文件

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


010360截图20250927235449672.png

010360截图20250927235523253.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

025360截图20250928001827559.png


项目布局模板

如上图:提供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>

360截图20250927225006085.png

以上就是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模板

deepseek-v3+vue3.5网页版webai流式对话模板

Flutter3.27跨平台仿抖音商城|flutter3.x实战短视频+直播+聊天程序

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。