今天给大家介绍一个开源项目electron-egg。

如果你是一个JS的前端开发人员，以前面对这项任务桌面应用开发在时，可能会感到无从下手，甚至觉得这是一项困难的挑战。ElectronEgg的出现，它能够帮助非专业人士也能轻松地开发高质量的桌面应用。

接下来给大家介绍下ElectronEgg：

一、框架特性与环境准备

ElectronEgg v4 是基于 Electron 的企业级开发框架，支持以下核心特性：

1、多进程架构：主进程 / 渲染进程 / 子进程分离，支持多任务处理

2、前端技术栈：原生支持 Vue3、React、Svelte 等主流框架

3、工程化工具链：内置热更新、代码混淆、自动打包等功能

4、安全增强：字节码加密、HTTPS 强制校验、沙箱模式

5、国产系统适配：支持统信 UOS、麒麟等国产操作系统

环境准备：

# 安装Node.js（推荐v16.20+）
nvm install 16.20.0 && nvm use 16.20.0

# 克隆项目
git clone https://gitee.com/dromara/electron-egg.git my-electron-app
cd my-electron-app

# 配置国内镜像源
npm config set registry https://registry.npmmirror.com
npm config set electron_mirror https://registry.npmmirror.com/-/binary/electron/

# 安装依赖
npm install

二、快速上手开发流程

1、项目结构解析：

├── build           # 打包配置
├── frontend        # 前端资源（支持Vite构建）
├── main            # 主进程代码
├── preload         # 预加载脚本
└── public          # 静态资源

2、启动开发服务：

# 同时启动前端和主进程（热更新）
npm run dev

# 分开启动（推荐大项目）
npm run dev-frontend   # 前端服务
npm run dev-electron   # 主进程服务

3、窗口管理示例：

// main/window.js
import { BrowserWindow } from 'electron'

export function createMainWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  })

  win.loadURL('http://localhost:3000')
  win.webContents.openDevTools()
}

三、核心功能实战

案例：构建跨平台待办事项应用

1、前端交互实现（Vue3）：

<!-- frontend/src/views/TodoList.vue -->
<template>
  <div class="todo-list">
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

const todos = ref([])
const newTodo = ref('')

// 从主进程获取数据
ipcRenderer.on('todos-loaded', (event, data) => {
  todos.value = data
})

// 新增任务
const addTodo = () => {
  ipcRenderer.send('add-todo', newTodo.value)
  newTodo.value = ''
}

// 删除任务
const deleteTodo = (index) => {
  ipcRenderer.send('delete-todo', index)
}

// 初始化加载数据
ipcRenderer.send('load-todos')
</script>

2、主进程数据持久化：

// main/services/TodoService.js
import { app } from 'electron'
import Store from 'electron-store'

const store = new Store()

export default class TodoService {
  static getTodos() {
    return store.get('todos', [])
  }

  static addTodo(text) {
    const todos = this.getTodos()
    todos.push(text)
    store.set('todos', todos)
  }

  static deleteTodo(index) {
    const todos = this.getTodos()
    todos.splice(index, 1)
    store.set('todos', todos)
  }
}

3、IPC 通信实现：

// main/ipc.js
import { ipcMain } from 'electron'
import TodoService from '../services/TodoService'

ipcMain.handle('load-todos', () => {
  return TodoService.getTodos()
})

ipcMain.handle('add-todo', (event, text) => {
  TodoService.addTodo(text)
})

ipcMain.handle('delete-todo', (event, index) => {
  TodoService.deleteTodo(index)
})

四、工程化与部署

1、前端构建：

npm run build-frontend   # 构建前端资源
npm run rd               # 复制资源到public目录

2、多平台打包：

# Windows 64位
npm run build-w-64

# MacOS M1
npm run build-m-arm64

# Linux DEB包
npm run build-l-64

3、自动更新配置：

// main/autoUpdater.js
import { autoUpdater } from 'electron-updater'

autoUpdater.setFeedURL('https://your-update-server.com')

autoUpdater.on('update-available', () => {
  dialog.showMessageBox({
    type: 'info',
    title: '更新提示',
    message: '发现新版本，是否立即下载？'
  }).then(result => {
    if (result.response === 0) autoUpdater.downloadUpdate()
  })
})

autoUpdater.on('update-downloaded', () => {
  dialog.showMessageBox({
    type: 'info',
    title: '更新完成',
    message: '应用将在重启后生效'
  }).then(() => {
    autoUpdater.quitAndInstall()
  })
})

五、性能优化与安全增强

1、内存管理：

// 主进程内存监控
const { MemoryInfo } = require('electron')

setInterval(() => {
  const memory = process.getProcessMemoryInfo()
  console.log(`RSS Memory: ${Math.round(memory.rss / 1024 / 1024)} MB`)
}, 5000)

2、安全加固：

// 主进程安全配置
app.commandLine.appendSwitch('no-sandbox')
app.commandLine.appendSwitch('disable-http-cache')

// 渲染进程沙箱模式
webPreferences: {
  sandbox: true,
  allowRunningInsecureContent: false
}

六、案例图片

1、vue-ant-design（本地）

2、禅道项目管理（web项目地址）

3、知识笔记

4、云盘

七、常见问题与解决方案

1、打包失败：检查 node-gyp 环境（Windows 需安装 Build Tools）确认 electron-builder 配置正确。

2、IPC 通信异常：检查主进程和渲染进程的事件名称是否一致确保预加载脚本正确注入。

3、内存泄漏：使用process.memoryUsage()监控内存避免在渲染进程中直接操作 DOM 元素。

总结

ElectronEgg v4 通过工程化工具链和多进程架构，显著提升了跨平台开发效率。结合 Vue3 和 Electron 的优势，开发者可以快速构建高性能桌面应用。建议在实际项目中：

1、优先使用框架内置工具（如热更新、自动打包）

2、遵循安全最佳实践（沙箱模式、HTTPS 强制）

3、合理管理进程间通信（使用 IPC 通道而非全局变量）

4、定期进行性能分析（内存 / CPU 监控）

通过以上实践，你可以高效利用 ElectronEgg v4 开发企业级桌面应用，并轻松适配 Windows、MacOS、Linux 及国产操作系统。

项目开源地址：

• gitee： https://gitee.com/dromara/electron-egg
• github： https://github.com/dromara/electron-egg
• gitcode： https://gitcode.com/dromara/electron-egg

最后一个小请求，如果这篇教程帮你解决了问题，或者让你对 Electron 开发有了新灵感，麻烦点击右下角 点赞 + 在看，你的支持是我持续输出优质技术内容的最大动力～