Electron 也是一个不错的轻量级跨平台应用开发框架，例如 Atom 和 Visual Studio Code 等就是用 Electron 开发的。Electron 在 macOS 下的安装非常方便，这里就单独来说一下 Windows 下的安装和配置。

Windows下的Electron

对于 macOS 用户来说，他们日常使用 Mac 都是不分区的，而且使用 npm 安装指令，基本上不需要调参。而对于 Windows 用户来说，我们有很多事情要做，例如 Node.js 的缓存目录更改，整合进 Windows Terminal 中，配置相关的用户环境变量等，需要一些调参，也有一些坑，所以这里给大家写一篇完整、详细、简单的教程，方便大家随时查阅和学习。

1.安装Node.js

Electron 依赖 Node.js 和 npm，所以我们先要安装这些，由于 Node.js 安装包附带 npm，所以我们只要下载安装 node.js 就行了。

Node.js 官网：https://nodejs.org/zh-cn/

我们在安装时，只需注意选上 Add to PATH 这个选项（应该是默认选择的）就行了，其他选项可以自己决定，或者保持默认。

Node.js 安装就这样很简单的结束了，接下来我们只要在终端中使用命令查看是否成功安装即可：

// 检查 node.js 版本
node -v

// 检查 npm 版本
npm -v

2.配置Node.js和npm

2.1 新建并移动缓存目录

我们一路安装下来还没有怎么配置呢，npm 的默认缓存目录都在 C 盘中：

C:\Users\yourname\AppData\Roaming\npm
C:\Users\yourname\AppData\Roaming\npm-cache

因为 npm 是 node.js 的一个子模块，所以我习惯把它整合进 node 的安装目录中，便于和 node 一起管理。我一般是在 node 的安装目录下，新建 node_cache 和 node_global 两个文件夹，把 npm 文件夹搬迁到 node_global，把 npm-cache 文件夹搬迁到 node_cache。

这样就很清晰明了:

• node_cache 文件夹就是原先 npm-cache 文件夹，是 npm 的缓存目录
• node_global 文件夹就是原先 npm 文件夹，就是全局安装 -global 的目录
• 注意，本地 local 安装的 npm install 命令是安装在当前命令行所在目录，所以不影响这个

注意，此时默认的模块 D:\dev\nodejs\node_modules 目录，将会改变为 D:\dev\nodejs\node_global\node_modules 目录， 如果直接运行npm install等命令会报错的。 我们还需要增加环境变量 NODE_PATH。

我们使用如下命令，即可写入 .npmrc 文件：

npm config set cache "D:\dev\nodejs\node_cache"
npm config set prefix "D:\dev\nodejs\node_global"

.npmrc 文件在 C:\Users\yourname\ 目录下，也可以自己手动修改。

prefix=D:\dev\nodejs\node_global
cache=D:\dev\nodejs\node_cache

2.2 修改缓存目录权限

我们新建的 node_cache 和 node_global 两个文件夹，默认权限是不对的，如果不进行修改，在使用 npm install 指令时，会报错 npm ERR! code EPERM。

这是因为权限问题，要么我们要用管理员模式打开 Windows Terminal，要么就修改目录权限。

我们只要把 node_cache 和 node_global 两个文件夹，对 Users 用户进行授权就行了。

2.3 配置和修改用户环境变量

由于我们修改了 npm 的缓存目录，我们还得重新配置和调整用户环境变量。

添加 NODE_PATH 变量

我们新建一个变量，命名为 NODE_PATH，把 node_global\node_modules 文件夹的路径放进去：

修改 PATH 变量

编辑 PATH 变量，我们先将 C:\Users\yourname\AppData\Roaming\npm 这一条删去，替换为刚刚新建的 node_global 文件夹的路径：

配置完成后，我们再使用 init 重新生成配置，使用 list 命令进行目录检查是否正确：

npm init -y

npm list

如果没有出现 npm ERR! extraneous 的错误提示，那么一切就配置完成了。

3.npm换源或cnpm

由于国内网络环境，换源算是刚需的，否则你就要自己会配置代理。换源方法还挺多的，自己选择一种合适的就行了：

3.1 使用 cnpm

第一种方法是使用新指令 cnpm 安装：

// 安装 cnpm（使用的是淘宝源）
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 官方安装
npm install electron

// 国内源安装
cnpm install electron

这样我们就相当于同时拥有 npm 和 cnpm 指令，自己可根据网络环境选择不同的源安装。这种方式的优点是，我们可以保留 npm 官方源。

3.2 npm 换源

方法二，我们还可以直接换源，在用户变量中，增加 ELECTRON_MIRROR 的变量，填入以下配置：

ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

或者使用命令添加：

// 配置淘宝源
npm config set registry=https://registry.npm.taobao.org

// 移除淘宝源
npm config delete registry

还或者，你可以在上面提到的 .npmrc 文件中，手动添加：

prefix=D:\dev\nodejs\node_global
cache=D:\dev\nodejs\node_cache
ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

3.3 使用代理

第三种方法，就是使用自己的代理软件：

// 添加代理
npm config set proxy=http://127.0.0.1:7890

// 移除代理
npm config delete proxy

这里面的 127.0.0.1 指的是本机地址，后面的 7890 是代理端口，这个要根据自己的代理软件决定。比如我用的小猫咪，这里面的端口信息都在这里标注的：

同理，你仍可以在 .npmrc 文件中手动添加：

prefix=D:\dev\nodejs\node_global
cache=D:\dev\nodejs\node_cache
proxy=http://127.0.0.1:7890

4.安装Electron

4.1 安装 Electron

好了，终于，Finally，我们要开始安装 Electron 了。

npm install -g electron --save-dev

全局安装完成之后，我们使用 electron -v 查看版本信息，是否正确被安装：

electron -v

然后你肯能会发现有如下的报错。说是 Windows 禁止运行脚本：

我们来查看 Windows PowerShell 的相关说明文档：《关于执行策略 – PowerShell》。

PowerShell 执行策略是一项安全功能，用于控制 PowerShell 加载配置文件和运行脚本的条件。 此功能有助于防止恶意脚本的执行。

4.2 PowerShell 管理执行策略

输入 get-ExecutionPolicy，返回的是 Restricted，表明禁止，我们需要调整执行策略：

// 检查策略状态
Get-ExecutionPolicy

// 更改执行策略
Set-ExecutionPolicy RemoteSigned

// 恢复默认执行策略
Set-ExecutionPolicy Restricted

更改完成后，我们就可以查看 electron 版本了：

到此，我们终于成功完成了 Electron 的安装。