dromara/electron-egg 快速入门指南：从安装到第一个桌面应用开发-优快云博客

dromara/electron-egg 快速入门指南：从安装到第一个桌面应用开发

【免费下载链接】electron-egg A simple, cross platform, enterprise desktop software development framework 项目地址: https://gitcode.com/dromara/electron-egg

引言

你还在为开发跨平台桌面应用而烦恼吗？是否觉得传统桌面应用开发门槛高、技术复杂？dromara/electron-egg 框架将为你提供一站式解决方案。本指南将带你从环境搭建到开发第一个桌面应用，全程实操，让你快速掌握这一强大框架。读完本文，你将能够：

理解 electron-egg 的核心优势与架构设计
搭建完整的开发环境
创建并运行第一个桌面应用
掌握应用打包与分发的方法
了解框架的高级特性与最佳实践

框架介绍

electron-egg 是一个简单、跨平台、企业级桌面软件开发框架（A simple, cross platform, enterprise desktop software development framework）。它基于 Electron 构建，旨在降低桌面应用开发门槛，让前端、服务端、运维等不同背景的开发者都能快速上手。

核心特性

特性	描述
跨平台支持	一套代码可打包成 Windows、macOS、Linux 及国产 UOS、Deepin、麒麟等系统版本
简单高效	支持 JavaScript/TypeScript，熟悉 Web 开发即可快速入门
前端技术兼容	理论上支持任何前端技术栈（Vue、React、Angular 等）
架构灵活	单业务进程/模块化/多任务(进程，线程，渲染进程)设计，适合大型项目
功能丰富	内置配置、通信、插件、数据库、升级、打包等完整解决方案
安全性	支持字节码加密、压缩混淆加密保护源代码
高性能	事件驱动、非阻塞式 IO 模型确保应用响应迅速

应用场景展示

electron-egg 已广泛应用于各类桌面软件场景：

常规桌面软件

Windows 平台应用示例：

macOS 平台应用示例：

Linux (UOS) 平台应用示例：

Web 转桌面应用

Vue + Ant Design 本地应用示例：

禅道项目管理系统桌面版示例：

游戏开发

H5 技术开发的游戏示例：

环境准备

系统要求

操作系统	最低配置
Windows	Windows 10 及以上，64位系统
macOS	macOS 10.15 (Catalina) 及以上
Linux	Ubuntu 18.04/Debian 10 及以上，已安装相关依赖库

安装依赖

在开始前，请确保已安装以下软件：

Node.js (v14.17.0 或更高版本)
npm (v6.14.13 或更高版本) 或 yarn (v1.22.0 或更高版本)
Git

快速开始

获取代码

克隆官方仓库：

git clone https://gitcode.com/dromara/electron-egg.git
cd electron-egg

安装依赖

npm install

目录结构解析

项目采用清晰的模块化结构，主要目录如下：

electron-egg/
├── LICENSE               # 开源协议
├── README.md             # 英文文档
├── README.zh-CN.md       # 中文文档
├── cmd/                  # 命令行工具配置
├── electron/             # Electron 主进程代码
│   ├── config/           # 配置文件
│   ├── controller/       # 控制器
│   ├── main.js           # 入口文件
│   ├── preload/          # 预加载脚本
│   └── service/          # 服务层
├── frontend/             # 前端渲染进程代码
│   ├── src/              # 源代码
│   ├── index.html        # 入口HTML
│   └── vite.config.js    # Vite配置
├── package.json          # 项目配置
└── public/               # 静态资源
    ├── images/           # 图片资源
    └── ssl/              # SSL证书

核心文件说明：

electron/main.js: 应用入口文件，初始化 ElectronEgg 实例
frontend/vite.config.js: Vite 构建配置
package.json: 项目依赖及脚本配置

开发第一个应用

运行开发环境

npm run dev

该命令会同时启动前端开发服务器和 Electron 主进程，默认情况下会自动打开应用窗口。

修改应用界面

打开前端页面文件 frontend/src/views/example/hello/Index.vue
修改页面内容：

<template>
  <div class="hello">
    <h1>我的第一个 electron-egg 应用</h1>
    <p>这是一个使用 electron-egg 框架开发的桌面应用</p>
    <button @click="showMessage">点击我</button>
  </div>
</template>

<script setup>
import { ipcRenderer } from 'electron'

const showMessage = () => {
  ipcRenderer.send('show-message', 'Hello from renderer process!')
}
</script>

<style scoped>
.hello {
  text-align: center;
  padding: 20px;
}
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

主进程与渲染进程通信

打开主进程控制器文件 electron/controller/example.js
添加消息处理逻辑：

const { ipcMain } = require('electron')

class ExampleController {
  constructor() {
    this.init()
  }

  init() {
    // 监听渲染进程发送的消息
    ipcMain.on('show-message', (event, message) => {
      console.log('收到渲染进程消息:', message)
      // 发送回复
      event.reply('message-reply', '消息已收到: ' + message)
      
      // 显示系统对话框
      this.showMessageBox(message)
    })
  }

  showMessageBox(message) {
    const { dialog } = require('electron')
    dialog.showMessageBox({
      type: 'info',
      title: '提示',
      message: '来自渲染进程的消息',
      detail: message
    })
  }
}

module.exports = ExampleController

在渲染进程中接收回复（修改 Index.vue）：

// 在 showMessage 函数后添加
ipcRenderer.on('message-reply', (event, reply) => {
  alert(reply)
})

应用打包

打包命令

electron-egg 提供了便捷的打包命令，支持多平台打包：

命令	描述
`npm run build-w`	打包 Windows 64位应用
`npm run build-m`	打包 macOS 应用
`npm run build-m-arm64`	打包 macOS ARM64 应用
`npm run build-l`	打包 Linux 应用

自定义打包配置

打包配置文件位于 cmd/ 目录下，可根据需求修改：

cmd/builder.json: 默认打包配置
cmd/builder-linux.json: Linux 平台配置
cmd/builder-mac.json: macOS 平台配置
cmd/builder-mac-arm64.json: macOS ARM64 配置
cmd/builder-windows.json: Windows 平台配置

高级特性

配置管理

框架提供了灵活的配置系统，配置文件位于 electron/config/ 目录：

electron/config/config.default.js: 默认配置
electron/config/config.local.js: 本地配置（不会提交到版本库）
electron/config/config.prod.js: 生产环境配置

进程通信

electron-egg 封装了 Electron 的 IPC 通信机制，提供更简洁的 API：

主进程发送消息：

// 在控制器中
this.app.ipc.send('channel-name', data)

渲染进程发送消息：

// 在 Vue 组件中
this.$ipc.send('channel-name', data)

监听消息：

// 主进程
this.app.ipc.on('channel-name', (event, data) => { ... })

// 渲染进程
this.$ipc.on('channel-name', (event, data) => { ... })

数据库集成

框架内置了对 SQLite 的支持，可通过 ee-core 提供的 API 操作数据库：

const { app } = require('ee-core')

// 获取数据库实例
const db = app.db.get('example')

// 执行查询
const result = await db.get('SELECT * FROM users WHERE id = ?', [1])

部署与分发

应用签名

为确保应用安全性和用户信任，建议对打包后的应用进行签名：

Windows: 使用 Windows 证书进行签名
macOS: 使用 Apple Developer ID 进行签名
Linux: 可选择使用 GPG 签名

更新机制

框架集成了自动更新功能，配置文件位于 electron/config/ 目录，可设置更新服务器地址、更新策略等。

常见问题与解决方案

开发环境问题

依赖安装失败

如果 npm install 失败，尝试以下解决方案：

清理 npm 缓存：

npm cache clean --force

使用淘宝 npm 镜像：

npm install --registry=https://registry.npmmirror.com

手动安装 electron：

npm install electron@latest --save-dev

启动时报错

如果 npm run dev 启动失败，请检查：

Node.js 版本是否符合要求
是否安装了所有依赖
是否有端口冲突

学习资源

官方文档

项目文档

社区支持

讨论区
技术交流群：通过官方文档获取最新群信息

案例库

更多应用案例

总结

electron-egg 框架为桌面应用开发提供了强大而灵活的解决方案，通过本指南，你已经掌握了从环境搭建到应用打包的全过程。无论是将现有 Web 应用转换为桌面应用，还是开发全新的桌面软件，electron-egg 都能大幅提高你的开发效率。

框架持续更新迭代，建议定期关注官方仓库获取最新特性和改进。如果你在使用过程中遇到问题，欢迎参与社区讨论或提交 Issue。

下一步

深入学习框架的 API 文档
尝试使用框架的高级特性，如插件系统、多窗口管理等
参与开源贡献，提交 PR 改进框架

希望本指南对你有所帮助，祝你开发愉快！

【免费下载链接】electron-egg A simple, cross platform, enterprise desktop software development framework 项目地址: https://gitcode.com/dromara/electron-egg

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考