Electron 快速入门 1：从项目创建到打包成 EXE
Electron 允许你用 Web 技术（HTML、CSS、JavaScript）开发跨平台桌面应用。以下是「创建项目 → 本地运行 → 打包为 Windows EXE」的完整流程。
一、创建并初始化项目
- 新建项目目录并进入
打开终端，执行命令创建文件夹并进入：
bash
mkdir my-electron-app && cd my-electron-app- 初始化 npm 项目
执行npm init（加-y可快速生成默认配置）：
bash
npm init -y二、安装 Electron 依赖
将 Electron 作为开发依赖安装到项目：
bash
npm install electron --save-dev三、配置项目入口与启动命令
1. 调整 package.json
打开 package.json，做两处修改：
- 确保
main字段指向主进程文件 （如main.js，若默认是index.js需手动改）； - 在
scripts中新增start命令，用于启动 Electron 应用。
修改后示例：
json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Electron 入门示例",
"main": "main.js", // 主进程入口文件
"scripts": {
"start": "electron .", // 启动应用的命令
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "你的名字",
"license": "MIT",
"devDependencies": {
"electron": "^27.0.0" // 实际安装的 Electron 版本
}
}2. 创建主进程文件 main.js
在项目根目录新建 main.js，先写测试代码验证启动：
javascript
console.log('Hello from Electron 👋');四、启动 Electron 应用
执行命令启动应用，终端会输出 Hello from Electron 👋：
bash
npm run start五、编写完整主进程逻辑（加载界面）
替换 main.js 为完整代码 ，让 Electron 启动窗口并加载界面（后续可替换为 Vue/React 打包后的 index.html）：
javascript
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
let win; // 全局维护窗口对象，防止被垃圾回收
function createWindow() {
// 创建浏览器窗口（可自定义宽高，示例为 375×830）
win = new BrowserWindow({ width: 375, height: 830 });
// 加载项目内的 index.html（后续可替换为框架打包后的页面）
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file:",
slashes: true,
})
);
// 可选：打开开发者工具（调试用）
// win.webContents.openDevTools()
// 窗口关闭时，释放窗口引用
win.on("closed", () => {
win = null;
});
}
// Electron 初始化完成后，创建窗口
app.on("ready", createWindow);
// 所有窗口关闭时，退出应用（macOS 除外，遵循系统交互习惯）
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
// macOS 下点击 Dock 图标时，若无窗口则重新创建
app.on("activate", () => {
if (win === null) {
createWindow();
}
});补充：创建 index.html（测试界面加载）
在项目根目录新建 index.html，写入简单页面：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Electron 示例</title>
</head>
<body>
<h1>Hello Electron!</h1>
<p>这是 Electron 加载的页面～</p>
</body>
</html>再次执行 npm run start，会看到 Electron 窗口加载出上述 HTML 页面。
六、打包成 Windows EXE 文件
使用 electron-packager 工具将项目打包为 Windows 可执行程序（EXE）。
1. 全局安装 electron-packager
bash
npm install -g electron-packager2. 执行打包命令
在项目根目录执行以下命令（参数说明：--win 指定 Windows 平台；--out MyApp 指定输出到 MyApp 文件夹；--arch=x64 指定 64 位架构；--electron-version 需与项目中 Electron 版本一致）：
bash
electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 27.0.0 --overwrite --ignore=node_modules3. 验证打包结果
打包完成后，MyApp 文件夹下会生成 MyApp-win32-x64 目录，进入该目录即可找到 MyApp.exe，双击即可运行 Electron 应用。
至此，从项目创建、本地调试到打包为 EXE 的流程就全部完成啦～