Electron 安装

在安装 Electron 之前，需要准备两个基础环境：

1、Node.js

Electron 是基于 Node.js 的框架，因此必须先安装 Node.js。

检查是否已安装：

node -v
npm -v

如果输出版本号，说明已安装。
若没有，请前往 Node.js 官网 下载 LTS（长期支持版）。

安装完成后，系统会自动附带 npm（Node 包管理器）。

如果不熟悉 Node.js，可以参考： Node.js

教程。

2、npm 或 yarn

Electron 的安装依赖 npm 或 yarn 管理包。

可以选择：

# 使用 npm
npm install electron --save-dev

# 或使用 yarn
yarn add electron --dev

安装 Electron

Electron 的安装方式有两种：全局安装 和 项目内安装。
推荐使用 项目内安装（更安全、更易维护）。

1、项目内安装

# 创建一个项目文件夹
mkdir my-electron-app
cd my-electron-app

# 初始化 Node 项目
npm init -y

# 安装 Electron
npm install electron --save-dev

安装成功后，会在项目目录中出现：

node_modules/
package.json
package-lock.json

验证是否安装成功

创建一个简单的 Electron 启动文件：

main.js

实例

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

index.html

实例

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
     <h1>Hello, Electron!</h1>
    <p>RUNOOB Electron 测试。</p>
</body>
</html>

然后在 package.json 里添加启动命令：

"scripts": {
  "start": "electron ."
}

运行：

npm start

如果弹出一个桌面窗口，里面写着 "Hello, Electron!" 说明安装成功/p>

常见安装问题及解决办法

问题 原因 解决办法
npm ERR! code ELIFECYCLE 权限或缓存问题 尝试执行 npm cache clean --force
electron failed to install correctly 网络或下载源超时 使用淘宝镜像安装（如下）

使用国内镜像加速安装

Electron 下载包很大（几十 MB），国内可能超时，可以用淘宝镜像：

# 临时设置
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ npm install electron --save-dev

或永久修改 npm 源：

npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

可选工具）

工具名 作用 安装命令
electron-builder 打包成安装程序（.exe / .dmg 等） npm install electron-builder --save-dev
electron-reload 修改代码后自动重载 npm install electron-reload --save-dev
electron-forge 快速构建模板 npx create-electron-app my-app