前言
本帖子属于自学记录用，如果有错误遗落，还请指正，感谢。
学习Electron需要会HTML+CSS+Javascript、以及Node.js，正好拿来积累经验，下面放一些文档链接：
安装环境
开发Electron前，需要先安装Node.js，推荐LTS长期维护版。
安装后可以打开CMD输入下面的指令，出现版本说明安装成功了。
npm是包管理器，在安装Node.js时一同安装，无需另外安装。
node -v
npm -v
配置你的第一个程序
我们先确定开发目录，用VS Code打开该文件夹。下面用的所有终端特指VS Code终端，如果有报错，请切换Command Prompt，不要用默认的PowerShell。
如果你在开发目录还需要新建子文件夹，创建完在终端CD过去，或者右键文件夹找到“在集成终端中打开”的选项。
接下来的重点是初始化项目，请在终端输入以下指令来初始化项目：
npm init
然后会弹出一堆英文，不用管，他会让你配置项目信息，不想更改的（默认）直接回车。
package name: (hello-electron) // 包名 只能用小写字母和连接符-
version: (1.0.0) // 版本号
description: // 用一段话来简单描述该应用用途
entry point: (index.js) // 或者你可以用 main.js
test command: // 调试命令 可以试试输入：electron .
git repository: // 目前不知道干嘛的 先跳过
keywords: // 目前不知道干嘛的 先跳过
author: // 作者名
license: (ISC) // 许可证
完成后会自动创建package.json文件，是程序必备的入口文件。
package.json
{
"name": "hello-electron",
"version": "1.0.0",
"description": "Hello Electron!",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "x77",
"license": "ISC"
}
安装 Electron 包
想要程序跑起来，还需要用npm安装electron包到程序的开发依赖库里，官方用的第二个方法
然后在VS Code终端输入以下指令来安装，需要注意安装有两种方法：
第一种 会安装到Node安装目录里面的node_modules里，全局调用
npm install electron -g
第二种 安装在当前开发目录，生成对应的node_modules文件夹，并且在package.json文件的"devDependencies"项写入依赖库，可缩写为 -D
npm install electron --save-dev
这两种在运行程序时有些许差别，下面具体再聊。
另外还有两种安装方式：一种不带任何参数项的，安装到当前开发目录，区别是不会在package.json写入依赖库；
第二种 –save 也是安装到当前目录，在package.json文件的"dependencies"项写入依赖库，可缩写为 -S
package.json // 依赖库长这样
{
"devDependencies": {
"electron": "^15.3.1"
}
}
耐心等待几分钟安装完成，下面两个命令都能检验electron是否安装成功。
其中npx指令会到 当前目录\node_modules.bin 文件夹下寻找对应的可执行文件，没有找到才会读取系统的环境变量，如果你-g全局安装的话。
如果不想看版本号，可以直接输入 electron 或者 .\node_modules.bin\electron ，不带 -v 打开软件界面。
npx electron -v
.\node_modules\.bin\electron -v
第一个程序 Hello World
但只有这个文件还不够，运行的时候会报错，还需要另外两个文件——main.js和index.html。
- package.json —— 元数据
- main.js ————— 代码
- index.html ——— 图形用户界面
每一个 electron 程序都有一个 "main" 入口文件，你需要指定一个js文件，一般用 main.js 来命名。
然后 main.js 需要一个html页面来显示窗口，一般用 index.html 命名。每个html文件就相当于一个窗口，用 main.js 来管理窗口。
index.html // 写一个超简单的HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello Electron</title>
</head>
<body>
<div>Hello, World!</div>
</body>
</html>
main.js // 文件内容借用官方例子，目前什么都没学，就暂时跳过
const { app, BrowserWindow } = require("electron");
function createWindow() {
const win = new BrowserWindow({
width: 500,
height: 500,
});
win.loadFile("index.html");
}
app.whenReady().then(() => {
createWindow();
});
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
运行你的第一个程序
package.json 文件的"scripts"项用来配置调试运行参数，你可以把test改成其他单词比如start，该指令对应的命令是 "electron ."，用来打开你写的 electron 程序，其中的小数点指的是当前目录。
需要注意，如果你electron模块安装在当前目录，"electron ."会无法识别到，需要改成 ".\node_modules\.bin\electron ." 后面连接着一个空格和小数点。
调试的时候，请在终端输入以下指令：
npm run start
如果只是运行去掉run即可，如下：
npm start
然后你就能看到你写的Hello World程序了，恭喜恭喜。