2. 环境搭建与第一个窗口

这是什么：环境搭建 = 装好 Node.js、建一个 Electron 项目，跑出第一个桌面窗口。

为什么用：Electron 应用不能在浏览器在线运行，它本身就是一个本地项目——这一步装好地基，后面每章都在这个项目上加代码。

如何用：跟着敲 6 条命令、写 2 个小文件，5 分钟后桌面上会弹出一个真正的应用窗口。

2.1 装 Node.js（一次性）

Electron 项目靠 npm 管理依赖，先确认电脑上有 Node（VSCode 教程装过的直接跳过）：

node -v
npm -v

你会看到：

v22.x.x 或更高
10.x.x 或更高

没有的话去 nodejs.org 下载 LTS 版双击安装，装完重开终端再试。

2.2 建项目、装 Electron

mkdir my-first-electron
cd my-first-electron
npm init -y
npm install --save-dev electron

🐢 国内下载 Electron 慢或失败？先执行这条换国内镜像再装：
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

版本说明：Electron 约每 8 周发一个大版本（本书写作时最新稳定版是 45.0.0），npm install 永远装当前最新，不需要也不建议指定版本号。

装完把 package.json 改成下面这样（重点是 main 和 scripts.start 两行）：

{
  "name": "my-first-electron",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^45.0.0"
  }
}

行	作用
`"main": "main.js"`	告诉 Electron：应用的入口文件是谁
`"start": "electron ."`	定义启动命令：`.` 表示运行当前目录这个应用
`devDependencies.electron`	npm 刚才自动写入的框架本体

2.3 写入口文件 main.js

项目根目录新建 main.js（数一数，核心就 10 行）：

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: '我的第一个桌面应用',
  })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  app.quit()
})

代码	作用
`require('electron')`	从框架里取两样工具：`app`（应用生命周期）和 `BrowserWindow`（窗口类）
`new BrowserWindow({...})`	造一个 800×600 的窗口
`win.loadFile('index.html')`	往窗口里加载页面——和浏览器打开网页是同一件事
`app.whenReady()`	等 Electron 初始化完成再建窗口（太早建会报错）
`window-all-closed`	所有窗口都关了就退出应用（macOS 习惯不同，进阶再管）

2.4 写界面 index.html

再新建 index.html——就是一个普通网页：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个桌面应用</title>
</head>
<body>
  <h1>你好，桌面！</h1>
  <p>这不是浏览器里的网页，是一个真正的桌面应用窗口。</p>
</body>
</html>

2.5 启动！

npm start

你会看到：

桌面上弹出一个 800×600 的窗口：
标题栏写着「我的第一个桌面应用」，
页面里是大标题「你好，桌面！」和一行说明文字。

恭喜，你已经写出第一个桌面软件了。 点窗口的 ✕ 关闭，程序退出。

❓ 常见翻车现场

Q1：npm start 报 'electron' 不是内部或外部命令

原因：npm install 没成功（多半是网络超时），node_modules 里没有 Electron。解决：删掉 node_modules 和 package-lock.json，设好 2.2 的镜像命令后重新 npm install。

Q2：窗口一闪就消失 / 报 Cannot find module 'E:\...\index.html'

原因：main.js 和 index.html 不在同一个文件夹，或文件名拼错（比如写成了 index.htm）。解决：确认三个文件（package.json、main.js、index.html）都在项目根目录平级摆放。

Q3：改了代码没效果

原因：Electron 不会自动刷新，跑的还是旧代码。解决：在终端按 Ctrl+C 停掉，重新 npm start（第 4 章教你加自动重启）。

💡 动手改

把窗口尺寸改成 1000, 700，重启看看
把 title 和 <title> 改成你的名字——注意以 index.html 的为准（窗口标题默认跟着页面走）
在 HTML 里加一个 <button>，点它没反应？对，还没写 JS——下一章就接上

📦 本章小结

环境三件套：Node.js + npm 项目 + npm install --save-dev electron
package.json 里 main 指入口，scripts.start 定义 npm start
main.js 用 BrowserWindow 建窗口、loadFile 加载页面
慢就换 npmmirror 镜像；改完代码要重启

下一章：主进程与渲染进程 🐸