Electron框架下载和安装教程（附安装包，适合新手）

Electron 是一个免费、跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。


使用 Web 前端技术来开发一个桌面 GUI 程序是一件多么炫酷的事情，你可以使用 HTML、CSS 来绘制界面和控制布局，使用 JavaScript 来控制用户行为和业务逻辑，使用 Node.js 来通信、处理音频视频等，几乎所有的 Web 前端技术和框架（jQuery、Vue、React、Angular 等）都可以应用到桌面 GUI 开发中。

至此，JavaScript 这门神奇的语言除了能开发 Web 前端、Web 后台（基于 Node.js）、手机 APP（基于 React），也能开发桌面 GUI 程序了。

与 Electron 类似的另外一个框架是 NW.js，它们都是用 Web 前端技术来开发桌面 GUI 程序。相比之下，Electron 社区更活跃，VS Code、Slack、Discord、飞书、Obsidian 都是用它写的，插件和踩坑贴一搜一大把。

经济学中的“有需求就有市场”在技术领域也适用，Electron 就是应需求而生的。Electron 面世之后，不仅满足了大部分现有的开发需求，还创造了大量的新需求，开辟了一个新的生态。

下载Electron

这里为大家找到了 Electron 最新版的压缩包：

下载地址：Electron最新版压缩包

里面包含 4 款 Electron 压缩包，分别对应：

• Windows：electron-v39.1.1-win32-x64.zip；
• Linux：electron-v39.1.1-linux-x64.zip；
• Mac OS： Intel 芯片选 electron-v39.1.1-darwin-x64.zip，Apple 芯片选 electron-v39.1.1-darwin-arm64.zip。

注意，新手小白不建议直接使用 Electron 压缩包，更推荐用 npm 安装 Electron，接下来手把手教大家用 npm 安装 Electron。

安装Node.js

首先检查你的电脑中是否已经安装好的 Node.js。按组合键“Win+R”打开 CMD 命令行窗口，依次执行如下命令：

node -v
v10.15.0
npm -v
6.11.3

如果输出版本号信息，说明已经安装了，可以直接跳转到安装 Electron 的环节。

这里为大家准备好了 Node.js 最新版的安装包：

下载地址：Node.js 安装包

1、Windows平台

1) 双击下载后的安装包，如下图所示，直接点击 Next：


2) 勾选接受协议选项，点击 Next 按钮 ：


3) Node.js默认安装目录为 "C:\Program Files\nodejs\" , 建议安装到非系统盘，并点击 Next 按钮：


4) 直接点击 Next：


5) 点击 Install（安装） 开始安装 Node.js：


6) 等待安装完成，出现下图的界面，表示成功安装：


安装完成后，我们可以在命令行或 Windows Powershell 中执行以下命令来测试：

node -v # 输出 Node 的版本信息
npm -v # 输出 NPM 的版本信息

2、Linux平台

Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：

# tar xf  node-v22.20.0-linux-arm64.tar.xz       // 从网盘中下载，解压
# cd node-v22.22.0-linux-arm64/                  // 进入解压目录
# ./bin/node -v                                  // 执行node命令 查看版本

解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接：

ln -s /usr/software/nodejs/bin/npm   /usr/local/bin/
ln -s /usr/software/nodejs/bin/node   /usr/local/bin/

3、Mac OS版本

可以下载 .pkg 安装包，双击直接启动安装向导。

也可以下载 .tar.gz 压缩包，解压后找到 bin 目录，就可以看到已经编译好的 node 和 npm 了，可以直接在命令使用。

安装Electron

安装 Electron 的方法很简单，进入一个空的文件夹，打开 CMD 命令行窗口，执行如下命令：

set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/&& npm install electron --save-dev

上述命令中，将 NPM 的镜像源切换到了国内的 taobao 仓库。国内还有很多镜像源仓库可以选择，比如，执行下面的任何一条命令，都可以安装Electron：

//华为云
set ELECTRON_MIRROR=https://repo.huaweicloud.com/electron/&& npm install
//阿里镜像
npm --registry https://registry.npmmirror.com  --save-dev install electron
//腾讯镜像
npm --registry http://mirrors.cloud.tencent.com/npm/ --save-dev install electron
//中科大镜像
npm --registry https://npmreg.proxy.ustclug.org/ --save-dev install electron
//浙大镜像
npm --registry https://mirrors.zju.edu.cn/npm --save-dev install electron

验证 Electron 是否安装成功，在 CMD 窗口执行 electron -v 验证，输出已安装 Electron 的版本号，表示安装成功。