共计 2077 个字符，预计需要花费 6 分钟才能阅读完成。
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架（如 VS Code、Slack、Discord 都是基于 Electron 开发的）。下面是一个面向新手的 Electron 安装与入门指南。
🧰 前提条件
- 安装 Node.js（建议 LTS 版本，如 18.x 或 20.x）
- 官网：https://nodejs.org/
- 安装后，在终端运行以下命令验证：
bash node -v npm -v
🚀 第一步：创建项目
- 创建项目文件夹并初始化 npm：
mkdir my-electron-app
cd my-electron-app
npm init -y- 安装 Electron 作为开发依赖：
npm install --save-dev electron📁 第二步：项目结构
创建以下文件：
my-electron-app/
├── package.json
├── main.js ← 主进程（控制应用生命周期）├── preload.js ← 预加载脚本（安全地暴露 Node 功能给渲染进程）└── index.html ← 渲染进程（你的 UI 界面）1. main.js（主进程）
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {createWindow()
app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()})2. preload.js（预加载脚本）
// 可选：暴露部分 Node.js 功能给渲染进程（出于安全考虑，不建议直接开启 nodeIntegration）window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])
}
})3. index.html（前端界面）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron</title>
</head>
<body>
<h1>Hello from Electron!</h1>
<p>Chrome: <span id="chrome-version"></span></p>
<p>Node: <span id="node-version"></span></p>
<p>Electron: <span id="electron-version"></span></p>
</body>
</html>▶️ 第三步：运行应用
- 修改
package.json，添加启动脚本：
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {"start": "electron ."}
}- 启动应用：
npm start✅ 你会看到一个窗口，显示 Electron、Node.js 和 Chrome 的版本信息！
📦 打包应用（可选）
开发完成后，可使用 Electron Forge 或 electron-builder 打包成可执行文件（.exe、.dmg 等）。
快速使用 Electron Forge：
npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make✅ 小贴士
- 主进程（main process）：管理应用生命周期、创建窗口。
- 渲染进程（renderer process）：每个窗口是一个独立的网页（类似浏览器标签）。
- 出于安全考虑，默认禁用
nodeIntegration，推荐使用preload.js暴露必要 API。
📚 官方资源
- 官网：https://www.electronjs.org/
- 快速入门文档：https://www.electronjs.org/docs/latest/tutorial/quick-start
正文完
