前言
此文是个人学习归纳的记录，腾讯云首发，未经允许，严禁转载，如有不对, 还望斧正, 感谢!
最近用到了electron， 顺便归纳一下，站在巨人的肩膀上。
常见的桌面GUI工具
名称 | 语音 | 优点 | 缺点 |
|---|---|---|---|
QT | C | 跨平台、性能好、生态好 | 依赖多，程序包大 |
PyQT | Python | 底层集成度高、易上手 | 授权问题 |
WPF | C# | 类库丰富、扩展灵活 | 只支持Windows，程序包大 |
WinForm | C# | 性能好，组件丰富，易上手 | 只支持Windows，UI差 |
Swing | Java | 基于AWT，组件丰富 | 性能差，UI一般 |
NW.js | JS | 跨平台性好，界面美观 | 底层交互差、性能差，包大 |
Electron | JS | 相比NW发展更好 | 底层交互差、性能差，包大 |
CEF | C | 性能好，灵活集成，UI美观 | 占用资源多，包大 |
- 底层依赖 调用：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，即仅在开发环境需要的额外依赖。
代码语言：javascript复制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腾讯技术创作特训营最新征文，快来和我瓜分大奖！
