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

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

使用技术

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

项目特性

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

项目框架结构

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

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

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

项目入口配置

1. 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主进程配置

1. /** * 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()})

复制代码

electron38-viteadmin通用布局模板

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

1.         

复制代码

1.                                                                                                                                                         

复制代码

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

1.                                             

复制代码

多语言配置vue-i18n

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

1. /** * 国际化配置 * @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)}

复制代码

ElectronVue3Admin自定义动图图表Hooks

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

1. /** * 动态图表Hooks */import { onMounted, onBeforeUnmount, ref } from 'vue'import * as echarts from 'echarts'import elementResizeDetectorMaker from 'element-resize-detector'export function useEcharts(el, options) {  let chartEl  let 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

1.                                               {{$t(item?.meta?.title)}}                                              {{$t('tabview__contextmenu-refresh')}}              {{$t('tabview__contextmenu-close')}}              {{$t('tabview__contextmenu-closeother')}}              {{$t('tabview__contextmenu-closeleft')}}              {{$t('tabview__contextmenu-closeright')}}              {{$t('tabview__contextmenu-closeall')}}                                             

复制代码

面包屑导航栏

1.                                         {{$t(item?.meta?.title)}}        {{$t(item?.meta?.title)}}            

复制代码

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后台管理模板

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！