electron快速使用(一)

前言

此文是个人学习归纳的记录，腾讯云首发，未经允许，严禁转载，如有不对, 还望斧正, 感谢!

最近用到了electron， 顺便归纳一下，站在巨人的肩膀上。

常见的桌面GUI工具

• 底层依赖 + 调用：CEF、QT、Swing
• UI美观：Electron（NW.js）、PyQT
• 跨平台：Swing（JAVA）、PyQT（Python、C++）、Electron（前端）

Electron相对于其他的来说，算是对前端来说非常友好的了，还阔以结合Vue来搞。

初始化 npm 项目

Electron 应用基于 npm 搭建，以 package.json 文件作为入口点。 首先创建一个文件夹，然后在其中执行 npm init 初始化项目。

npm init

这条命令会配置 package.json 中的一些字段。 有几条规则需要遵循：

• 入口点 应当是 main.js (我们很快就会创建它)
• author (作者)、license (开源许可证) 和 description (描述) 可以为任意内容，不过在晚些的 打包应用程序 步骤中可能是需要的。

然后，将 Electron 安装为项目的 devDependencies，即仅在开发环境需要的额外依赖。

npm install electron --save-dev

在初始化并且安装完 Electron 之后，文件夹中会出现一个 node_modules 文件夹，其中包含了 Electron 可执行文件；还有一个 package-lock.json 文件，指定了各个依赖的确切版本。

启动命令写 "start": "nodemon --watch index.js --exec electron ." ，这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。这样子最后在终端输入 npm start这样每次修改index.js 主进程文件都会重新启动项目了，index.js可以自行修改 main.js等等

运行 Electron 应用

在 package.json 中指定的脚本文件 main 是所有 Electron 应用的入口点。 这个文件控制 主程序 (main process)，它运行在 Node.js 环境里，负责控制应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)，稍后会详细介绍。

在继续编写 Electron 应用之前，将使用一个小小的脚本来确保主进程入口点已经配置正确。 在根目录的 main.js 文件中写一行代码：

main.js

console.log(`欢迎来到 Electron `)

因为 Electron 的主进程是一个 Node.js 运行时，可以使用 electron 命令执行任意 Node.js 代码（甚至将其用作 REPL）。

npm run start

终端应该会输出 欢迎来到 Electron。接下来会学习如何用 HTML 创建用户界面，并将它们装载到原生窗口中。

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！