最快的入门方式不是从零开始配置 Webpack 和主进程脚本，而是直接使用 Electron 官方维护的脚手架工具 —— Electron Forge。它整合了项目初始化、开发运行、打包分发三大环节，让你在几分钟内就能看到一个可运行的桌面窗口。
2.1.1 为什么选择 Electron Forge
Electron 生态中有多种脚手架方案（如 electron-builder 直接打包、electron-vite 模板等），但 Electron Forge 是官方推荐的一站式工具链，原因有三：
- 全生命周期覆盖：一条命令完成项目初始化；内置开发服务器支持热更新；集成
electron-builder的打包能力。 - 模板丰富：支持 Vanilla JS、TypeScript、React、Vue、Angular 等多种官方模板，开箱即用。
- 插件机制：可以灵活扩展，比如添加 Webpack、Vite 作为构建器，或者接入自动更新服务。
对于新手，用 Electron Forge 可以避开早期繁琐的配置，把精力集中在学习主进程和渲染进程的交互上。
2.1.2 创建第一个项目
确保已安装 Node.js（推荐 v18 或更高版本），然后在终端执行：
npm create electron-app@latest my-app按提示操作：
- 选择模板：初次体验建议选择 Vite + TypeScript 或 Vite + JavaScript，Vite 构建快、配置少。
- 进入项目目录并安装依赖：
cd my-app
npm install
完成后，项目结构大致如下：
my-app/
├── package.json
├── forge.config.js # Forge 配置文件
├── vite.main.config.mjs # 主进程 Vite 配置
├── vite.preload.config.mjs # 预加载脚本 Vite 配置
├── vite.renderer.config.mjs # 渲染进程 Vite 配置
├── src/
│ ├── main.js # 主进程入口
│ ├── preload.js # 预加载脚本
│ └── renderer/
│ ├── index.html # 渲染进程 HTML
│ └── src/ # 前端源码（App.vue, main.ts 等）
└── out/ # 构建输出（自动生成）如果你对底层工具没特殊偏好，保持默认模板即可；后面随时可以自定义。
2.1.3 启动与开发
运行本地开发环境：
npm startElectron Forge 会同时启动 Vite 开发服务器和 Electron 主进程。稍等片刻，一个原生窗口会出现在屏幕上，内容正是 src/renderer/index.html 渲染的页面。修改渲染进程的任何代码（比如 App.vue），窗口会自动热更新；修改主进程代码，应用会自动重启并保持窗口状态（如果配置了 HMR）。
这里有几个真实的开发体验值得提前知道：
- 默认控制台输出在主进程的终端里，渲染进程的错误需要打开 DevTools（通过
Ctrl+Shift+I或Cmd+Option+I）查看。 - 主进程可以通过
npm start看到日志，但断点调试需要额外配置（后面章节会讲）。 - 第一次启动可能会稍慢，后续的热重启速度很快，日常开发体感流畅。
2.1.4 打包与分发
当你开发告一段落，想把应用打包成可安装文件，Electron Forge 提供了一组 make 命令：
# 打包当前平台的可分发文件
npm run make执行后，会在项目根目录生成 out/make/ 文件夹，里面存放对应平台的安装包：
- macOS：
.dmg文件 - Windows：
.exe（Squirrel 安装程序）或.nupkg - Linux：
.deb、.rpm或.zip
forge.config.js 中已经预设了基础打包配置，一般无需修改就能获得可运行的包。如果需要在包名前添加平台后缀、更换图标、或添加安装许可证，都可以在这个配置文件里轻松完成。
2.1.5 快速体验的意义
以上三个步骤 —— 初始化、启动、打包 —— 是整个 Electron 开发流程的缩影。用官方脚手架完成它们，不是为了立刻做出一个复杂软件，而是建立起“代码修改 → 窗口反馈 → 可分发产物”的正向循环。这个循环一旦跑通，后续学习主进程 API、IPC 通信和本地数据存取时，你永远有一个可执行、可调试的起点，而不会被环境配置卡住。
从下一节开始，我们将深入这个脚手架的各个模块，逐步理解主进程如何创建窗口、预加载脚本如何安全地桥接能力，以及渲染进程如何像一个真正的桌面应用一样响应用户操作。