环境搭建与第一个应用：Node.js与npm安装、Electron CLI工具、创建第一个Hello World应用、项目结构解析

说实话，每次带新人入门Electron，我最怕的就是环境搭建这一步。明明是个很简单的过程，但总有人卡在各种奇奇怪怪的地方。我自己当年第一次装Node.js的时候，也踩过不少坑。今天咱们就把这一步彻底捋清楚。

Node.js与npm安装

Electron是基于Node.js的，所以第一步就是装Node.js。我建议你直接去官网下载LTS版本，别追新。为什么？因为LTS版本稳定，社区支持好，你在网上搜到的问题解决方案基本都是基于LTS的。

安装完成后，打开终端验证一下：

node -v
npm -v

能看到版本号，就说明装成功了。嗯，这里要注意一点——如果你用的是Windows，记得把终端以管理员身份运行，否则有些全局安装会报权限错误。我曾经因为这个折腾了半小时，后来发现就是权限问题。

Electron CLI工具

装好Node.js之后，我们有两种方式创建Electron项目。一种是手动搭建，另一种是用CLI工具。我个人更推荐新手先用CLI工具，因为它帮你把目录结构、配置文件都生成好了，省心。

安装Electron的CLI工具：

npm install -g electron
npm install -g electron-forge

或者你也可以用npx直接运行，不用全局安装：

npx create-electron-app my-first-app

这里有个小坑——electron这个包本身比较大，下载速度可能会很慢。我建议你配置一下npm的镜像源：

npm config set registry https://registry.npmmirror.com

配置完之后，下载速度能快好几倍。你想想看，本来要等五分钟的，现在十几秒就搞定了。

创建第一个Hello World应用

好，现在我们来创建第一个应用。用CLI工具创建项目：

npx create-electron-app hello-world
cd hello-world
npm start

如果一切顺利，你会看到一个空白的Electron窗口弹出来。这就是你的第一个应用了！

但说实话，这个默认应用太简陋了。我们来改一改，让它显示"Hello World"。

找到项目根目录下的src/index.html，把内容替换成：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>这是我的第一个Electron应用</p>
  </body>
</html>

然后找到src/main.js，确保它加载的是这个HTML文件：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  win.loadFile('src/index.html')
}

app.whenReady().then(createWindow)

再次运行npm start，你就能看到"Hello World"了。

项目结构解析

现在我们来拆解一下这个项目的结构。说白了，Electron项目就是一个Node.js项目，只不过多了一些特殊的配置和文件。

这里我要特别说一下main.js和index.html的关系。你想想看，Electron应用其实就是一个浏览器窗口，只不过这个浏览器是Chromium内核的。main.js负责创建这个窗口，而index.html就是窗口里显示的内容。

主进程和渲染进程是Electron最核心的概念。简单来说：

• 主进程：管理窗口、菜单、系统托盘等，只能有一个
• 渲染进程：显示页面内容，可以有多个（每个窗口一个）

它们之间通过IPC（进程间通信）来交流。这个机制我们后面会花一整章来讲，现在你只需要知道有这么回事就行。

好了，环境搭建和第一个应用就到这里。你现在应该能成功运行一个Electron应用了。下一章我们会深入主进程和渲染进程的通信机制，到时候你会对这两个进程有更深的理解。