不会Electron开发？看这篇就够了 点击关注公众号，“技术干货”及时达！ 前言 这篇文章 S 将带大家从安装到开发到启动第一个窗口的全过程。旨在让大家能够顺利的成功跑起来第一个项目。 同时，带大家避免由于网络、版本等问题导致的挫败感。 在后续的文章中，希望带领大家完整的做一个 Electron 项目，学习新技能的真谛，不是疯狂的观看教程文章、视频，而是自己上手开发。有正反馈才是快速学习的最好办法。 本来这期是打算和集合 Vue、React 以及框架一起的，但担心有朋友等的太久，故分两期发布啦。 后续安排 Electron 简介、系统文章撰写原因创建一个 Electron 程序，并搭建程序框架如何集成 Vue / React，以及基于 Electron 的框架（electron-vite）使用前后端通信框架搭建导入游戏模块及对应的数据存储启动游戏模块及对应的文件系统游戏分类模块及对应的配置文件设计游戏主页模块及对应的手柄操作Electron 的在线升级、打包、加密...其他附加（时间允许）： nvm 安装、使用 及国内存在的问题pnpm 从入门到精通vite 简单入门攻略vite 在 Electron 中的应用架构必修课：如何根据项目大小搭建合适的架构Electron 安全性指南Electron 疑难杂症搭建教程前置条件 NodeJS 20.16.0+pnpm 8.15.3+Electron 本身依赖高版本，因此最好使用最新的 LTS 版本的 NodeJS 或者跟随我使用相同版本的 NodeJS: 20.16.0 。 如果你的电脑还有其他项目需要依赖其他版本的 NodeJS ，强烈建议你使用 nvm 管理你的 NodeJS 版本。 pnpm 是 S 我的使用习惯，强烈建议大家跟我保持一致，避免由于网络问题导致的 Electron 安装失败。 相信不少人使用 Electron 遇到过被网络卡死的问题 安装 初始化 package.json在自己喜欢的位置，创建项目文件夹进入文件夹运行以下命令初始化 package.jsonpnpm init修改 package.json 配置（带注释的位置是需要修改的）{ "name": "game-launcher", // 包名 "version": "1.0.0", "description": "", "main": "main.js", // 入口文件位置 "scripts": { "start": "electron .", // electron 启动命令 "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "Sincenir", // 开发者 "license": "ISC", // 协议}配置 .npmrc *这步对于国内没有魔法的用户超级重要！ 在项目根目录下创建 .npmrc 文件在文件中写入以下内容engine-strict=trueresolution-mode=highestregistry=https://registry.npmmirror.com/这三句话主要目的是： 限制项目依赖的 NodeJS 版本安装依赖时，优先最高版本依赖指定 npm 包的下载源，避免网络问题导致的 Electron 下载失败其中尤其是第三条，请务必填写，就算你有 magic 和 shell proxy ，依旧有很大可能安装 Electron 失败。 安装 Electron安装 Electronpnpm install electron@32.0.2在 package.json 中限制 NodeJS 版本"engines": { "node": "=20.16.0"}根目录新建 main.js 文件，并写入一行打印console.log('Hello from Electron ??')运行启动命令，并查看控制台pnpm start打印以下内容代表着我们第一步安装过成功啦 ~ 你可以安装最新的 Electron ，同时在安装时保证 NodeJS 为最新版本。 但强烈建议你保持一致的版本，避免由于 Electron 更新速度导致的开发问题。 安装时遇到任何网络问题导致的安装失败，请检查上一步的 .npmrc 文件配置。 第一个窗口 创建页面在项目根目录下创建一个 index.html 文件自己写一些内容或者复制以下代码!DOCTYPE htmlhtml head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" / meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" / titleHello from Electron renderer!/title /head body Hello from Electron renderer!/h1 ?? /body/html直接打开，会是以下页面，一个传统的 HTML 页面。我们需要将它塞到一个 Electron 的壳子里面。 将页面塞到 Electron 壳子中以下所有操作均在 main.js 中。 创建一个指定大小的窗口（在应用准备完成后创建）const { app, BrowserWindow } = require("electron"); app.whenReady().then(() = { const win = new BrowserWindow({ width: 400, height: 200, });});创建完运行 pnpm start 会启动一个空白的 Electron 的项目。 挂载 HTML 到窗口中const { app, BrowserWindow } = require("electron"); app.whenReady().then(() = { const win = new BrowserWindow({ width: 400, height: 200, }); win.loadFile("index.html");});中止项目（ctrl + c），重新运行 pnpm start ，我们会发现页面的内容有了。总结这期我们主要讲的是 Electron 的 前置条件、安装、挂载页面 ，其实纯静态页面，这些已经完全可以实现了。 但你会发现，我们现在不会直接写 HTML 了，我们常常用的 Vue、React 等框架，下期将带来 Electron 如何集成这些框架 。 同时你还会发现，我们在启动项目后，更新 HTML 内容 Electron 项目并不会更新，必须手动刷新，这里的 热更新 也会在下期同步带来。 附录nvm简单使用教程 你可以通过这篇简易文档进行使用（nvm）。 关于由于网络问题导致的 nvm install 20.16.0 失败问题 失败信息： Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt. Get "https://nodejs.org/dist/latest/SHASUMS256.txt": dial tcp 104.20.22.46:443: i/o timeout 解决方案： macOS/Linuxexport NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node Windowsnvm node_mirror https://npmmirror.com/mirrors/node/ nvm npm_mirror https://npmmirror.com/mirrors/npm/ pnpm简单使用教程 这里就不展开了，安装只需要运行以下命令： npm install -g pnpm 大家有需要或者后期有兴趣，会展开讲讲 pnpm 相关的内容。 点击关注公众号，“技术干货”及时达！