Electron 是一个基于Node.js和Chromium的跨平台桌面应用开发框架，你可以用 HTML、CSS、JavaScript 构建 Windows、macOS、Linux 三端一致的桌面应用，比如 VS Code、Figma 都是基于 Electron 开发的。
本教程会带你从环境搭建到打包第一个应用，快速上手 Electron 开发。
一、前置条件
安装 Node.js
确保你的电脑已安装 Node.js（推荐 LTS 版本），可以通过以下命令验证：node-vnpm-v下载地址：Node.js 官网
基础技术储备
熟悉 HTML、CSS、JavaScript 基础语法，了解 Node.js 基本使用（如require、模块）。
二、步骤 1：创建项目并初始化
新建项目文件夹
mkdirmy-first-electron-appcdmy-first-electron-app初始化 npm 项目
执行命令并根据提示填写信息（也可以直接npm init -y快速生成）：npminit生成的
package.json需要确保两个关键配置：main：入口文件（默认index.js，后续会编写）scripts：添加启动脚本
三、步骤 2：安装 Electron
在项目根目录执行安装命令（推荐安装到开发依赖）：
npminstallelectron --save-dev四、步骤 3：编写核心代码
Electron 应用分为主进程和渲染进程，我们需要编写 3 个核心文件：main.js（主进程）、index.html（渲染进程页面）、package.json（配置脚本）。
1. 配置 package.json
修改package.json，添加启动脚本start：
{"name":"my-first-electron-app","version":"1.0.0","description":"A simple Electron app","main":"main.js","scripts":{"start":"electron ."},"devDependencies":{"electron":"^28.0.0"}}2. 编写主进程文件：main.js
主进程负责管理窗口生命周期、系统事件、IPC 通信等，是 Electron 应用的入口。
// 引入 Electron 的核心模块const{app,BrowserWindow}=require('electron');constpath=require('path');// 定义创建窗口的函数functioncreateWindow(){// 创建一个浏览器窗口constmainWindow=newBrowserWindow({width:800,// 窗口宽度height:600,// 窗口高度webPreferences:{// 预加载脚本路径（可选，用于安全暴露 API）preload:path.join(__dirname,'preload.js')}});// 加载本地的 index.html 文件mainWindow.loadFile('index.html');// 开发环境下，打开开发者工具（可选）// mainWindow.webContents.openDevTools();}// Electron 初始化完成后，创建窗口app.whenReady().then(()=>{createWindow();// macOS 特有：当所有窗口关闭后，重新打开窗口app.on('activate',()=>{if(BrowserWindow.getAllWindows().length===0){createWindow();}});});// 所有窗口关闭后，退出应用（Windows & Linux）app.on('window-all-closed',()=>{if(process.platform!=='darwin'){app.quit();}});3. 编写预加载脚本（可选）：preload.js
预加载脚本运行在渲染进程中，但拥有 Node.js 权限，用于安全地向渲染进程暴露 API，避免直接在渲染进程中操作 Node.js 带来的安全风险。
const{contextBridge}=require('electron');// 向渲染进程暴露全局 APIcontextBridge.exposeInMainWorld('electronAPI',{appVersion:()=>process.versions.electron});4. 编写渲染进程页面：index.html
这是应用的界面，和普通网页完全一致，你可以用任何前端框架（Vue/React）替换。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>我的第一个 Electron 应用</title><style>body{text-align:center;padding:50px;font-family:Arial,sans-serif;}</style></head><body><h1>Hello Electron!</h1><p>当前 Electron 版本：<spanid="version"></span></p><script>// 调用预加载脚本暴露的 APIdocument.getElementById('version').innerText=window.electronAPI.appVersion();</script></body></html>五、步骤 4：运行应用
在项目根目录执行启动命令：
npmstart此时会弹出一个 800×600 的窗口，显示Hello Electron!和当前 Electron 版本，说明应用运行成功。
六、步骤 5：打包应用（生成可执行文件）
开发完成后，需要将应用打包成对应平台的可执行文件（如.exe、.dmg、.deb），推荐使用electron-forge工具。
安装 electron-forge
npminstall--save-dev @electron-forge/cli npx electron-forgeimport打包应用
npmrunmake打包完成后，会在项目根目录生成
out文件夹，里面包含对应平台的可执行文件：- Windows：
out/my-first-electron-app-win32-x64下的.exe文件 - macOS：
out下的.dmg文件 - Linux：
out下的.deb或.snap文件
- Windows：
七、核心概念梳理
| 进程类型 | 作用 | 运行环境 |
|---|---|---|
| 主进程 | 管理窗口、系统事件、IPC 通信、权限操作（文件读写、网络请求） | Node.js 环境 |
| 渲染进程 | 负责应用界面渲染，和普通网页一致 | Chromium 环境 |
| 预加载脚本 | 作为主进程和渲染进程的桥梁，安全暴露 API | 两者之间 |
八、进阶方向
- IPC 通信：使用
ipcMain.handle+ipcRenderer.invoke实现主进程和渲染进程的数据交互（如读取本地文件）。 - 集成前端框架：将
index.html替换为 Vue/React 项目的打包产物，开发更复杂的界面。 - 添加系统功能：集成托盘图标、菜单、快捷键、文件拖拽等 Electron 特有能力。
- 性能优化：关闭不必要的开发者工具、优化渲染进程、使用内存缓存。
 安装版 绿色版)
)
