【Electron学习】Windows系统环境配置与安装

关于 Electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。

目前它已成为开源开发者、初创企业和老牌公司常用的开发工具。

windows环境配置

安装Node.js

访问Node.js下载页面，选择Windows Installer。 下载完成后， 执行安装程序，根据引导完成安装即可。

在安装过程中的配置界面, 勾选Node.js runtime、npm package manager和Add to PATH这三个选项。

安装完成后，我们需要来确认Node.js是不是可以正常工作。 点击 开始 按钮，输入PowerShell，找到Windows PowerShell。 打开PowerShell后，通过以下命令来确认node 和 npm已经安装成功：

# 下面这行的命令会打印出Node.js的版本信息
node -v

# 下面这行的命令会打印出npm的版本信息
npm -v

如果上述命令均打印出一个版本号，就说明Node.js已经安装好了.
然后需要选择一个合适的JavaScript代码编辑器，我选用的是微软的 Visual Studio Code

设置npm镜像

由于国内使用npm速度极慢，需要设置国内镜像才能正常使用，这里推荐设置为淘宝镜像一劳永逸：

npm config set registry https://registry.npm.taobao.org

设置完成后可以通过以下命令验证是否成功：

npm config get registry

或

npm info express

设置electron镜像

注意淘宝镜像的目录中，版本号文件夹开头是不带v的，因此此处需要修改环境变量ELECTRON_CUSTOM_DIR为"{{ version }}"：

npm config set ELECTRON_MIRROR "https://npm.taobao.org/mirrors/electron/"
npm config set ELECTRON_CUSTOM_DIR "{{ version }}"

我也尝试过设置本地镜像目录，但是没有成功跳过下载环节：

# 以下设置似乎并没有生效
npm config set electron_config_cache "C:\Users\Terry\AppData\Local\electron\Cache"

安装测试

以上环境变量设置完毕后，可以尝试在项目文件夹中以依赖项形式安装electron。全局安装方法将在后面介绍。

# 带下载进度显示
npm install --save-dev --verbose electron
# 不带下载进度显示
npm install --save-dev electron

安装完毕后会有类似如下的信息：