集成多种解决方案的 electron 桌面应用开发框架

前端飞行手册2025/11/11大约 4 分钟

封装IPC跨进程通信、动态主题及布局切换、本地数据存储、窗口池管理、系统托盘、音乐可视化、自动更新、打包等功能

项目介绍

🚀 electron-vue-application 是一款基于 Electron + Vue 3 + Vite + TypeScript 构建的现代化桌面应用研发模板，整合业内主流技术栈，确保项目始终保持技术先进性，提供完整的开发工具链和最佳实践，从编码到打包全流程优化，内置丰富功能模块，覆盖桌面应用开发的核心场景需求，为开发者提供开箱即用的企业级桌面应用解决方案。

主要功能

现代化 UI 开发: Element Plus + UnoCSS，支持动态主题切换和暗黑模式、水平/垂直布局动态切换
窗口管理方案: 封装窗口管理，使用窗口池方案，支持主窗口预加载动画、透明窗口、跨进程路由切换等
高效进程通信: 统一的 IPC 通信封装，支持多种通信模式，简化主进程与渲染进程交互
数据共享：跨进程数据共享及存储方案，主进程总调度共享数据，渲染进程维护并更新状态管理的数据
丰富组件生态: 内置 ECharts 图表组件封装、Flex 响应式布局组件、富文本编辑器、密码输入框组件、可定制水印组件、渐变文字、用户引导等实用组件，开箱即用
国际化支持: 全局国际化支持，主进程和渲染进程国际化同步方案，多语言无缝切换
自动更新机制: 完整的应用更新流程，支持开发环境模拟、支持主动检查、弹窗提示、下载进度展示
安全与稳定: 封装日志管理、崩溃监控、electron-store 数据持久化方案，保障应用稳定运行
数据安全存储防篡改防复制：采用分层架构设计，适配器模式可接入不同存储库，支持数据加密存储，数据文件防篡改、防复制
桌面悬浮球组件：精美的桌面可拖拽悬浮球小组件，可添加快捷操作方式，配置化灵活启用
electron打包优化：
窗口自动贴边吸附隐藏：窗口拖拽靠近桌面边缘自动贴边吸附隐藏，可通过配置化启用
屏幕截图：集成QQ截图，支持全屏截图、区域截图、窗口截图、截图编辑等
录屏：全屏录制，保存本地
音乐可视化：支持三种可视化模式：条形图、圆环图、电音动感特效；音乐播放控制；歌词上传、显示
高效开发：页面元素快速定位代码位置，大幅提升开发效率；自定义生成windows/mac应用图标一键下载
编码规范：TypeScript 提供类型安全和智能提示，确保代码质量和可维护性，husky + lint-staged 提交前自动格式化 + ESLint 代码规范检查，CommitLint 提交信息规范化
系统托盘及菜单：自定义系统托盘、自定义窗口菜单、开机自启动、自定义应用协议通过浏览器唤醒应用
安装包美化：自定义应用安装界面UI，选择目录、安装进度、安装后启动应用等，美化安装过程，提升用户体验

技术栈

开发环境

操作系统

项目文件结构

└── electron-vue-application/
    ├── build/
    ├── resources/
    ├── scripts/
    ├── src/
    │   ├── assets/
    │   ├── common/
    │   │   ├── config/
    │   │   ├── locales/
    │   │   ├── tsconfig.json
    │   │   ├── types/
    │   │   └── utils/
    │   │       └── index.ts
    │   ├── main/
    │   │   ├── index.ts
    │   │   ├── ipcManager.ts
    │   │   ├── launch/
    │   │   ├── modules/
    │   │   ├── shortCut.ts
    │   │   ├── tsconfig.json
    │   │   └── types/
    │   ├── preload/
    │   │   ├── globals.ts
    │   │   ├── index.ts
    │   │   └── tsconfig.json
    │   ├── renderer/
    │   │   ├── apis/
    │   │   ├── App.vue
    │   │   ├── auto-imports.d.ts
    │   │   ├── components/
    │   │   ├── consts/
    │   │   ├── directives/
    │   │   ├── hooks/
    │   │   ├── layout/
    │   │   ├── main.ts
    │   │   ├── router/
    │   │   ├── services/
    │   │   ├── store/
    │   │   ├── styles/
    │   │   ├── tsconfig.json
    │   │   ├── typing/
    │   │   ├── utils/
    │   │   ├── views/
    │   │   └── vite-env.d.ts
    │   └── types/
    ├── commitlint.config.ts
    ├── components.d.ts
    ├── doc/
    ├── electron.config.js
    ├── genIcons.html
    ├── index.html
    ├── lint-staged.config.js
    ├── package-lock.json
    ├── package.json
    ├── README.md
    ├── tsconfig.base.json
    ├── tsconfig.json
    ├── uno.config.ts
    └── vite.config.ts