Electron 41.2 + Vite 8 + Vue3 + ElementPlus重写桌面端后台系统

2026/11最新重构electron41+vite8+pinia4客户端管理系统ElectronAdmin。

💥 告别卡顿！Electron 41.2 全新重构，Vite 8 + Vue3 深度集成，Pinia4状态配置，ElementPlus组件库，极致搭建跨平台客户端中后台管理系统。支持亮色+深色主题、4种通用布局模板，涵盖图表、表格、表单、列表、编辑器、错误处理等页面。

技术栈

编辑器：vscode
跨平台框架：Electron41.2
前端技术框架：vite^8.3.6+vue^3.5.45+vue-router^5.4.0
组件库：element-plus^2.14.8
状态管理：pinia^4.1.0
国际化方案：vue-i18n^11.4.18
图表插件：echarts^6.1.0
markdown组件：md-editor-v3^7.1.0
富文本组件：@vueup/vue-quill^1.5.5
数据模拟：mockjs^1.1.0
打包构建：electron-builder26.18.0

项目特征

🚀 前沿技术栈：基于 Electron 41.2、Vite 8、Vue 3、Pinia 4 构建，享受极速开发体验。
🌍 国际化支持：集成 Vue-I18n，支持中文、英文、繁体三种语言无缝切换。
🎨 多布局模板：支持 4种通用布局模板（经典、分栏、纵向、横向），满足不同业务布局需求。
🧭 智能路由：支持动态路由权限、面包屑导航及快捷路由标签栏，操作更流畅。
🖥️ 多窗口管理：深度封装 Electron 多开窗口管理，轻松应对桌面多开窗口交互场景。
📊 丰富业务场景：内置 Echarts 图表、复杂表格、表单、列表、富文本编辑器及全局错误处理页面。
💅 UI 组件：基于 Element Plus 组件库，风格统一，组件丰富。

项目目录结构

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

Electron41-Vite8Admin桌面版后台管理系统已经发布到我的原创作品小店。

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

入口配置main.js

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

import { launchApp } from '@/windows/actions'

// 引入状态和路由配置
import Pinia from './pinia'
import Router from './router'

// 引入插件配置
import Plugins from './plugins'

launchApp().then(config => {
  if(config) {
    window.config = config
  }

  // 初始化app程序实例
  createApp(App)
  .use(Pinia)
  .use(Router)
  .use(Plugins)
  .mount('#app')
})

App.vue模板

<script setup>
  import { onMounted, computed } from 'vue'
  import { useRouter } from 'vue-router'

  import { appState } from '@/pinia/modules/app'
  import { Loaded } from '@/plugins/loaded'

  // 引入组件库国际化
  import zhCN from 'element-plus/es/locale/lang/zh-cn'
  import zhTW from 'element-plus/es/locale/lang/zh-tw'
  import enUS from 'element-plus/es/locale/lang/en'

  const locales = {
    'zh-CN': zhCN,
    'zh-TW': zhTW,
    'en': enUS,
  }

  const router = useRouter()
  const appstate = appState()

  const locale = computed(() => locales[appstate.lang] ?? zhCN)

  appstate.changeTheme()

  Loaded()

  onMounted(async() => {
    // 确保初始导航就绪
    await router.isReady()
    // 通知主进程当前窗口已渲染就绪，显示窗口
    window.electron.send('win-ready')
  })
</script>

<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>

Electron主进程配置

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

Electron-ViteAdmin后台布局模板

内置4种通用布局模板，可自行扩展布局结构。

<script setup>
  import { computed } from 'vue'
  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 LayoutComponent = computed(() => {
    switch (appstate.config.layout) {
      case 'classic':
        return Classic
      case 'columns':
        return Columns
      case 'vertical':
        return Vertical
      case 'horizontal':
        return Horizontal
      default:
        return Classic
    }
  })
</script>

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

electron+vite实现无边框拖拽窗口/导航标题

<script setup>
  import { ref, h } from 'vue'
  import { ElMessageBox, ElSpace, ElButton } from 'element-plus'

  import { authState } from '@/pinia/modules/auth'
  import { isTrue } from '@/utils'

  import { winSet } from '@/windows/actions'

  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: 2026},
  })

  const authstate = authState()
  
  const hasMaximized = ref(false)
  const isResizable = ref(true)
  const isMaximizable = ref(true)

  // 用户是否可以手动调整窗口大小
  window.electron.invoke('win-isResizable').then(res => {
    isResizable.value = res
  })
  // 窗口是否可以最大化
  window.electron.invoke('win-isMaximizable').then(res => {
    isMaximizable.value = res
  })
  
  // 初始监听窗口是否最大化
  window.electron.invoke('win-isMaximized').then(res => {
    hasMaximized.value = res
  })
  // 实时监听窗口是否最大化
  window.electron.on('win-maximized', (e, data) => {
    hasMaximized.value = data
  })

  // 最小化
  const handleWinMin = () => {
    window.electron.invoke('win-min')
  }
  // 最大化/还原
  const handleWinToggle = () => {
    window.electron.invoke('win-toggle').then(res => {
      hasMaximized.value = res
    })
  }
  // 关闭
  const handleWinClose = () => {
    if(window.config.isMajor) {
      ElMessageBox.confirm(
        ({ confirm, cancel, close }) => {
          return h('div', {style: 'width: 320px;'}, [
            h('p', { style: 'margin-bottom: 30px' }, '是否最小化到系统托盘，不退出系统程序?'),
            h('div', {class: 'flex-r'}, [
              h(ElSpace, {size: 10}, () => [
                h(
                  ElButton,
                  {
                    round: true,
                    type: 'primary',
                    text: true,
                    onClick: () => {
                      cancel()
                    },
                  },
                  () => '最小化到托盘'
                ),
                h(
                  ElButton,
                  {
                    round: true,
                    type: 'danger',
                    onClick: () => {
                      confirm()
                    },
                  },
                  () => '确认退出'
                ),
              ])
            ])
          ])
        },
        {
          title: '确认退出',
          showConfirmButton: false,
          showCancelButton: false,
          draggable: true,
          autofocus: false,
          distinguishCancelAndClose: true,
          customStyle: {'padding': '15px', 'width': 'auto'},
        }
      ).then((action) => {
        authstate.logout()
        winSet('close')
      }).catch((e) => {
        if(e ==='cancel') {
          setTimeout(() => {
            winSet('hide', window.config.id)
          }, 250)
        }
      })
    }else {
      winSet('close', window.config.id)
    }
  }
</script>

<template>
  <div class="ev__winbtns flexbox flex-alignc vu__undrag" :style="{'z-index': zIndex}">
    <div class="ev__winbtns-actions flexbox flex-alignc" :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) && isResizable && isMaximizable" 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>

国际化配置

/**
 * 国际化配置
 * @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 || langVal
  appstate.setLang(lang)

  const i18n = createI18n({
    legacy: false,
    locale: lang,
    messages: {
      'en': enUS,
      'zh-CN': zhCN,
      'zh-TW': zhTW
    }
  })
  
  app.use(i18n)
}