HoRain云--Electron 安装

云夏之末

349人浏览 · 2026-03-19 10:30:00

云夏之末 · 2026-03-19 10:30:00 发布

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

在安装 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`