首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >最新版electron38-vite7-admin电脑端中后台管理系统

最新版electron38-vite7-admin电脑端中后台管理系统

原创
作者头像
andy2018
发布2025-09-28 22:56:33
发布2025-09-28 22:56:33
1090
举报
文章被收录于专栏:h5h5

2025最新跨平台electron38+vue3+vite7+pinia3+element-plus桌面端通用后台系统模板。

electron38-vue3admin使用最新跨平台框架electron38+vite7搭建项目模板,vue3 setup语法编码。

使用技术

  • 开发工具:vscode
  • 跨平台框架:electron^38.1.2
  • 前端框架:vite^7.1.7+vue^3.5.21+vue-router^4.5.1
  • UI组件库: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

项目框架结构

Electron主进程入口配置

代码语言:actionscript
复制
/**
 * 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()
})

项目配置入口main.js

代码语言:actionscript
复制
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')
})

项目布局模板

提供了4种常用的布局结构模板。

代码语言:actionscript
复制
<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自定义无边框窗口导航

代码语言:actionscript
复制
<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>

国际化多语言配置

代码语言:actionscript
复制
/**
 * 国际化配置
 * @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)
}

附上几个最新实战项目

Electron38+Vite7+Pinia3+ElementPlus客户端聊天程序

最新原创uniapp-vue3-osadmin手机版后台管理系统

最新研发uniapp+vue3仿微信app聊天模板

最新原创flutter3.27+bitsdojo_window客户端聊天Exe

自研新版Flutter3.32仿微信app聊天|朋友圈模板

基于uni-app+vue3实战短视频+聊天+直播app商城

基于uniapp+deepseek+vue3跨平台ai流式对话

electron35+deepseek桌面端ai模板

vue3.5+deepseek网页版ai流式对话

flutter3.27+getx仿抖音app短视频商城

Electron32桌面端os系统

electron31+vue3客户端聊天Exe实例

tauri2.0+rust+vue3电脑版Exe聊天软件

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用技术
  • 项目框架结构
  • Electron主进程入口配置
  • 项目配置入口main.js
  • 项目布局模板
  • electron38+vue3自定义无边框窗口导航
  • 国际化多语言配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档