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)