Electron 搭建开发环境（Windows 11系统）

今天药忘吃喽~ 2024-03-17 10:37 52阅读 0赞

#### 目录 ####

*  前言
 *  一、环境说明
 *  二、Node.js安装
 *   *  1.官网下载
     *  2.安装
     *  3.验证安装是否成功
     *  4.可能错误
 *  三、开发工具
 *   *  1.开发工具
     *  2.VSCode
 *  总结

--------------------

## 前言 ##

如果想要使用 `Electron` 进行桌面应用程序开发，首先需要搭建一个开发环境。对于初学者，这可能是一个绕不开的步骤。作为 Java 编程学习者，我也曾需要安装 `JDK`、`IDE` 等来进行开发。那么，如何搭建 `Electron` 开发环境呢？我们可以先参考官网的入门指导，但在这里，我将详细记录我搭建的过程。保姆式~~~

--------------------

## 一、环境说明 ##

我已将电脑系统升级至 Windows 11，虽然一些小伙伴对 Windows11 有些抱怨，但是有不少人已经在尝试该系统。接下来我就在 Windows 11 中进行整个 `Electron` 开发和测试。

在进行 `Electron` 开发时，我们需要先下载安装 `Node.js`。它是 `Electron` 框架的基础，并在底层进行使用。我们还需要安装 `npm`，它可以帮助我们管理包。

最后，需要安装一个代码编辑器，它能够支持我们进行代码调试、任务执行和版本管理等操作。(`Electron` 官方推荐是 `VScode`)

因此，我们需要搭建以下开发环境组合：

*  操作系统：Windows 11
 *  `Node.js` 版本: 18.16.0
 *  `npm` 版本: 9.5.1
 *  开发工具：VSCode 1.78.2

## 二、Node.js安装 ##

`Node.js` 官网：[https://nodejs.org/zh-cn][https_nodejs.org_zh-cn]

> Node.js是一个开源、跨平台的 JavaScript 运行时环境。

`Node.js` 是一个 `JavaScript` 运行环境，它不是一种编程语言、库或框架，而是像浏览器一样，能够运行 `JavaScript` 代码的运行环境。另外，`Node.js` 是基于 `Chrome V8` 引擎开发的。通过这些介绍，相信大家已经对 `Node.js` 有了基本的了解。

### 1.官网下载 ###

`Node.js` 的下载非常容易，进入官方，大家会看到如下的页面：

![在这里插入图片描述][f14cf000870c43548fc3330ae61bdeab.png]

这时候已经为我们准备好了 Windows（x64）平台版本的 `Node.js`，我们鼠标点击 **18.16.0 长期维护版** 进行下载：

![在这里插入图片描述][07ab8bc7a5504948ad05607676cc6cb5.png]

这里也提供我下载好的，百度网盘提取 `node-v18.16.0-x64.msi`：

> 链接：https://pan.baidu.com/s/1NPcTVA2QQ2gAyYVmdlJn5A?pwd=gl7n  
> 提取码：gl7n

那么【长期维护版（`LTS`）】和【最新尝鲜版（`Current`）】有什么区别？我们选择哪个版本呢？

先来看区别：

*  `LTS` 版本的稳定性更高，它们通常更加成熟和可靠。相反，最新版本则包含了最新的特性和改进，但可能存在一些未知的问题，因此较不稳定。
 *  长期维护版将会获得更长时间的支持，这意味着它们将会被更久时间地维护和更新。最新版本则会更频繁地推出新版本，因此得到的支持时限相对较短。

基于以上的考虑，建议选择更加稳定且容易维护的 `LTS` 版本。

如果大家想要下载其他平台版本，可以点击顶部导航菜单【下载】，或是版本下面的链接【其他下载】，如下图所示：

![在这里插入图片描述][dcd7c927677d4937856c77c31e815080.png]

进入后就会看到如下的页面，大家按需自行下载即可。

![在这里插入图片描述][fe36475ddd4c48228431593318f1c648.png]

### 2.安装 ###

下载后我们会得到一个 Windows 安装程序包：  
![在这里插入图片描述][68b55ebbba124a5eb1a91395102bce00.png]

双击运行，会看到如下的安装界面：欢迎来到 `Node.js` 设置向导。

![在这里插入图片描述][9ea3bf9e7fd24017a67bceefa7a18892.png]

点击下一步【Next】，要勾选同意许可协议。

![在这里插入图片描述][8cdf56e9732f45c4a2a272160da3ffe5.png]

点击下一步【Next】按钮，选择安装目录。它默认安装目录是 `D:\Program Files\nodejs\`，我电脑软件只要能改安装目录的都不会安装在C盘（系统盘），因为很多软件都是按照在 `C:Program Files` 目录下，所以直接把C盘符改为D就可以了。

![在这里插入图片描述][8c0f3eb8d73440c499ffa4ec4871d651.png]

点击下一步【Next】按钮，该界面是自定义设置，我们一般不做改变，也就是说 `Node.js` 这些特性或设置都要。

![在这里插入图片描述][9284da1c376a4009b50f8c655033ead0.png]

*  `Node.js runtime`：这个是核心 `Node.js`
 *  `corepack manager`：这个是 `Node.js` 通用包管理器
 *  `npm package manager`：这个是 `Node.js` 推荐的 `npm` 包管理器
 *  `Online documentation shortcuts`：将在线文档也添加到开始菜单
 *  `Add to PATH`：将 `Node.js`、`npm` 添加到环境变量 `Path` 中，这样我们可以直接在 `cmd` 中执行命令了。

点击下一步【Next】按钮，该界面是询问是否安装一些工具，是可选项，想一次安装齐全可以选择，我这里不选择，每次安装都比较慢，可能是我的网不行吧！

![在这里插入图片描述][1c7c48318c454188a5398633e67c0e28.png]

点击下一步【Next】按钮，该界面是说我们已经设置好，可以进行安装了。

![在这里插入图片描述][6bad8ca1916940e3aedd965df313b3a9.png]

点击安装【Install】按钮，开始安装。

![在这里插入图片描述][87aa26bed68549058cd95c04ab4f1081.png]

其实大家也发现了，一路傻瓜式安装即可！  
安装后会在开始菜单找到 `Node.js` 文件夹，看到如下快捷方式：

![在这里插入图片描述][178bf43200b34a429542d885aff90854.png]

### 3.验证安装是否成功 ###

**快捷方式：Node.js**

`Node.js` 快捷方式启动的是 `Node.js` 命令行交互环境，也称为 `REPL（Read-Eval-Print Loop）`。通过该环境，你可以输入 `JavaScript`代码并进行交互式的实时测试和调试。

点击 `Node.js` 快捷方式，进入显示 `Welcome to Node.js v18.16.0` 说明已经安装成功。

![在这里插入图片描述][a5faaea426754dfb8dfd01d99ae4e447.png]

**快捷方式：Node.js command prompt**

`Node.js command prompt` 快捷方式启动的是 `Node.js` 命令提示符窗口，该窗口将使你更方便地使用一系列命令行工具和 `Node.js packages`。它使用的是 Windows 特有的操作命令提示符格式。

点击 `Node.js command promat`，然后输入 命令 `node -v` 显示其版本，说明安装成功。

![在这里插入图片描述][5a5f149f27a74bc48d4c6dc50b2dfc78.png]

**cmd命令提示符**

其实与 `Node.js command prompt` 一样，`win+r` 在运行窗口输入 `cmd`，点击确定按钮。

![在这里插入图片描述][5ed688bc35cf4f41b41d8d93509d926b.png]

输入命令 `node -v` 会显示其版本。

![在这里插入图片描述][bb55113579d743209fadd4dd1ae3defb.png]

`npm` 其实已经包含在 `Node.js` 中，我们输入命令 `npm -v` 就可以查看其版本，而且在官网下载页面，包括安装时都有提到 `npm`。

![在这里插入图片描述][9cb246fb9fd44a7e99bef2734052a1d6.png]

### 4.可能错误 ###

其实 `Node.js` 安装一般不会出现什么错误，这里从网上搜集了一些可能的错误：

*  安装过程卡在某个步骤，可能是因为网络问题或下载源的问题。你可以检查网络连接或切换到其他可靠的下载源。
 *  安装完成后，尝试在命令行中输入 `node` 命令打开 `Node.js`，但出现未定义或命令不可用等提示。这可能是环境变量设置不正确导致的，你可以检查环境变量路径并进行必要的更改。
 *  在 Windows 系统上，安装时可能会遇到一些权限问题，如需要管理员权限才能安装。你需要以管理员身份运行安装程序或使用管理员帐户进行安装。
 *  在 Mac 系统上，由于一些安全限制和权限问题，可能会导致安装失败或出现警告。你可以在终端中使用 `sudo` 命令以管理员身份运行安装程序，或者通过安全与隐私设置中的选项来允许安装。
 *  某些杀毒软件可能会阻止 `Node.js` 的安装或运行，导致一些问题。你可以在杀毒软件设置中添加 `Node.js` 为信任程序，以确保正常运行。

## 三、开发工具 ##

开发工具有很多，这里我们要选择前端开发工具，看大家个人爱好，自己顺手就好。

### 1.开发工具 ###

这里介绍几款前端开发工具：

*  `Visual Studio Code`：微软推出的一款免费、跨平台的代码编辑器，功能强大且易于使用，支持多种语言和插件扩展。据说它就是 `Electron` 开发的。
 *  `Sublime Text`：另一款流行的跨平台代码编辑器，具有快速、可定制化和高效的特点，同时也支持很多插件。
 *  `WebStorm`：由 JetBrains 开发的一款商业化的集成开发环境（IDE），可以提供前端编程所需的众多工具和插件。
 *  `Electron Fiddl`e：（官方的，在 `Electron` 官网顶部导航“工具”下有入口）是一款用于学习和测试 `Electron` 程序的开发工具。它提供了一个简单的代码编辑器和运行环境，可以帮助开发人员更好地了解 `Electron` 的各个方面。

### 2.VSCode ###

在这里我选择 `Visual Studio Code`，简称 `VSCode`。官网：[https://code.visualstudio.com/][https_code.visualstudio.com]。进入首页后，直接下载就可以。

![在这里插入图片描述][64e26eaa5e9a428cbf97cad879b5bdb3.png]

下载完成后就可以得到一个稳定版的安装包。

![在这里插入图片描述][001471dab77347a69e943cececcbafd4.png]

这里也提供我下载好的，百度网盘提取 `VSCodeUserSetup-x64-1.78.2.exe`

> 链接：https://pan.baidu.com/s/1qB-Est2u3nUBb7vx1P7WZg?pwd=uegd  
> 提取码：uegd

双击进行安装，中文安装界面 so easy!  
进入安装界面就是许可协议，我们需要进行勾选。

![在这里插入图片描述][9142c3e0dbb649429270e4df90648e9e.png]

点击【下一步】，选择安装目录，同样改为其他盘。

![在这里插入图片描述][ccb5b9188f844cca83d3d580201aca24.png]

点击【下一步】，是关于快捷方式文件夹的创建，默认即可。

![在这里插入图片描述][896f3de74db54d3785511d9ce7a4b10b.png]

点击【下一步】，选择附加任务，这里将 **创建桌面快捷方式** 勾选。

![在这里插入图片描述][5b0e339b4d514a06bd8bff13ba6edc81.png]

点击下一步，是刚刚设置的安装信息，点击【安装】就可以了。

![在这里插入图片描述][924ae205b4a0494997e244f0a36b9d10.png]

打开 `VSCode` 工具界面如下：

![在这里插入图片描述][3a21ef667a9d4f1683d070eca5c97f86.png]

我们新建 `hello.js`，编写简单 `js` 代码，然后运行，就可以在控制台查看运行结果：

![在这里插入图片描述][1ddfd6ae5f294e78ad7fe8b0876d0350.png]

--------------------

## 总结 ##

这里非常详细的记录了 `Electron` 开发环境搭建的过程，包括 `Node.js` 的官网下载与安装，`VSCode` 的官网下载与安装。整个操作非常简单。

[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn
[f14cf000870c43548fc3330ae61bdeab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/fe9b8ec143fc4f76a0483d86f4e42c7d.png
[07ab8bc7a5504948ad05607676cc6cb5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/cda7dea2f5174921b2783a961440ea58.png
[dcd7c927677d4937856c77c31e815080.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f261bd3a158743b6a13f44a98f42c8da.png
[fe36475ddd4c48228431593318f1c648.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b0f631886f63422fa3776864ee7c8f91.png
[68b55ebbba124a5eb1a91395102bce00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/8fe751c3519f419899ae6186568fefa4.png
[9ea3bf9e7fd24017a67bceefa7a18892.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/00c4cf497283458f93050887c1c2da33.png
[8cdf56e9732f45c4a2a272160da3ffe5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/1d62e8436c3b4851a0d4811a566f8d4f.png
[8c0f3eb8d73440c499ffa4ec4871d651.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/93ecfa23c3bc4aa9a2a30b49baecb03d.png
[9284da1c376a4009b50f8c655033ead0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/e427fc5e72184985bf17af16b7fefd9e.png
[1c7c48318c454188a5398633e67c0e28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b4572e4db5d240eaa6c9bd2de61aaae9.png
[6bad8ca1916940e3aedd965df313b3a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ac9487b078584e9881dd43cc51d9eabf.png
[87aa26bed68549058cd95c04ab4f1081.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/4fdc9a5a8e6043308592531651bfd4b9.png
[178bf43200b34a429542d885aff90854.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/87c779c23be04ffc81b4265790bde14f.png
[a5faaea426754dfb8dfd01d99ae4e447.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/08177eee6cb04f2482ebb967b7ff4d05.png
[5a5f149f27a74bc48d4c6dc50b2dfc78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ad0951e6f8554a7e940b3e71d9391abd.png
[5ed688bc35cf4f41b41d8d93509d926b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/0d1e3142298947cfba3732de751e3e6b.png
[bb55113579d743209fadd4dd1ae3defb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/7f5e5278d30f4738b511b6a3aaa143ab.png
[9cb246fb9fd44a7e99bef2734052a1d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/1feb011ab6c24962a327553841614721.png
[https_code.visualstudio.com]: https://code.visualstudio.com/
[64e26eaa5e9a428cbf97cad879b5bdb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ab70739ed99445029170cac795345ae3.png
[001471dab77347a69e943cececcbafd4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/6a31241490694a0395f48822886e14d5.png
[9142c3e0dbb649429270e4df90648e9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/547832fc4e104b5c96b0c1f6356711de.png
[ccb5b9188f844cca83d3d580201aca24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/3c39e32bd2be4977a54b4b2c1a7f8336.png
[896f3de74db54d3785511d9ce7a4b10b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/3b05066124ca409db45a5eceaa5c4b83.png
[5b0e339b4d514a06bd8bff13ba6edc81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/e3917dfb69fa42fab628ee98e6a0595b.png
[924ae205b4a0494997e244f0a36b9d10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/803b0c74c7a74396ba390fb4d0109384.png
[3a21ef667a9d4f1683d070eca5c97f86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/4b62ace8463c44c29f5b03cbc24e46a9.png
[1ddfd6ae5f294e78ad7fe8b0876d0350.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/e50d623b9cb64f44954e57be56e8149d.png