本章节我们将一步步介绍如何创建一个简单的 Electron 实例。1、创建项目目录打开终端依次执行mkdir my-electron-app cd my-electron-app npm init -y npm install electron --save-dev生成结构如下my-electron-demo/ ├─ package.json ├─ main.js └─ index.html2、配置 package.json打开 package.json修改成以下内容{ name: my-electron-app, version: 1.0.0, description: RUNOOB Electron 测试, main: main.js, scripts: { start: electron . }, devDependencies: { electron: latest } }说明字段作用main指定 Electron 启动时要执行的主进程文件scripts.start定义npm start命令的执行内容electron .表示让 Electron 运行当前目录下的应用devDependencies开发依赖不会被打包进最终应用3、编写主进程文件 main.js这是 Electron 的核心控制中心负责创建应用窗口和加载页面。创建文件 main.js输入以下完整代码带详细注释实例// main.js —— Electron 主进程文件// 从 electron 模块中导入 app控制应用生命周期 和 BrowserWindow创建窗口const { app, BrowserWindow } require(electron);// Node.js 内置模块用于拼接文件路径const path require(path);// 创建一个函数用于生成主窗口function createWindow() {// 创建一个新窗口实例const win new BrowserWindow({width: 800, // 窗口宽度像素height: 600, // 窗口高度像素resizable: true, // 是否允许用户拖动调整窗口大小默认 truetitle: RUNOOB Electron 测试, // 窗口标题会显示在标题栏webPreferences: {// 网页运行相关配置contextIsolation: true, // 启用上下文隔离安全推荐nodeIntegration: false, // 禁止直接在网页中使用 Node.js}});// 加载本地的 index.html 文件到窗口中// path.join(__dirname, index.html) 会返回当前目录下的 index.html 路径win.loadFile(path.join(__dirname, index.html));// 打开开发者工具可选方便调试// win.webContents.openDevTools();}// 当 Electron 初始化完成后会触发 app 的 ready 事件// app.whenReady() 返回一个 Promise执行完后调用 createWindow()app.whenReady().then(createWindow);// 当所有窗口关闭时触发仅在 macOS 外生效app.on(window-all-closed, () {// process.platform 返回操作系统平台// macOS 的平台值是 darwin在 macOS 上一般保留程序常驻if (process.platform ! darwin) {app.quit(); // 退出应用}});// macOS 特殊逻辑点击 Dock 图标时重新创建窗口app.on(activate, () {// 如果当前没有打开任何窗口就重新创建一个if (BrowserWindow.getAllWindows().length 0) {createWindow();}});说明概念说明主进程main processElectron 启动后首先运行的脚本负责窗口创建、菜单控制、系统 API 等。BrowserWindow用于创建一个浏览器窗口里面加载网页内容HTML 文件或 URL。app.whenReady()确保 Electron 初始化完成后才创建窗口否则可能报错。win.loadFile()加载本地 HTML 文件。也可以用win.loadURL(https://example.com)加载网站。contextIsolation将网页脚本和 Node 环境隔离提高安全性官方推荐。nodeIntegration若设为true可在页面中直接用 Node.js但有安全风险。window-all-closed在所有窗口都关闭时退出应用Windows/Linux 生效。4、编写渲染页面 index.html创建 index.html 文件输入以下内容实例!DOCTYPE htmlhtmlheadmeta charsetutf-8title菜鸟教程(runoob.com)/titlestylebody {margin: 0;display: flex;align-items: center;justify-content: center;height: 100vh;font-family: Segoe UI, Arial, sans-serif;background: #f5f7fa;}.box {text-align: center;background: white;padding: 40px 60px;border-radius: 12px;box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);}h1 {margin: 0 0 10px;color: #333;}p {margin: 0;color: #666;}/style/headbodydiv classboxh1Hello, Electron!/h1pRUNOOB Electron 测试。这是你创建的第一个 Electron 桌面应用 #x1f389;/p/div/body/html5、运行项目回到终端执行npm start运行后你会看到一个桌面窗口显示Hello, Electron! RUNOOB Electron 测试。这是你创建的第一个 Electron 桌面应用 #x1f389;