正确安装Electron、Electron-quick-start和Electron Forge-Toy模板网

这篇具有很好参考价值的文章主要介绍了正确安装Electron、Electron-quick-start和Electron Forge。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

0.提示

Electron Forge引用了Squirrel.windows项目，这导致Electron Forge生成的安装包只能安装在本地用户帐户中。
Or maybe you’re good at reinvent the wheel and can read this part of the documentation.
ElectronForge文档 - 扩展 - 制作工具
Squirrel.Windows的Github议题 - Choosing install directory

1.确认是否安装了Node.js、VSCode和Git

打开命令行工具，输入

node -v && npm -v

如果正确输出了两个版本号，则已经安装了 Node.js，关闭命令行工具
Node.js中文官网
VSCode官网
Git官网

2.新建项目文件夹

创建一个项目文件夹，命名为

electron-demo

3.使用npm初始化

在项目文件夹下，Shift+右键空白处
点击在此处打开 Power Shell 窗口(S)，或者点击在此处打开命令窗口(W)，输入以下命令（运行就完了，别问）

start cmd

只保留新的命令行窗口(后面一直要用，不要关闭)，输入以下命令

npm init -y

4.编辑package.json

打开VSCode，把项目文件拖到VSCode窗口里打开，编辑package.json，编辑为以下状态

{
    "name": "electron-demo",
    "version": "1.0.0",
    "description": "description",
	"main": "./electron-quick-start/main.js",
    "scripts": {
		"?go": "echo \"不要自定义start,start会被electron-forge覆盖占用\" && exit 1",
        "go": "electron ."
    },
    "keywords": [],
    "author": "author",
    "license": "MIT"
}

5.安装 Electron

命令行窗口输入以下命令

set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/&& npm install --save-dev electron

6.安装 electron-quick-start

也可以选择来自 Gitee 的公开同步仓库：electron-quick-start(from Gitee)
在项目文件夹下，右键空白处，点击Git Bash Here(后面一直要用，不要关闭)，输入以下命令

git clone https://github.com/electron/electron-quick-start

打开克隆下来的electron-quick-start文件夹
删除其中的git、license、package、readme相关文件，仅保留以下必要文件

index.html
main.js
preload.js
renderer.js
style.css

编辑main.js

mainWindow.loadFile('index.html')

改为

mainWindow.loadFile(path.join(__dirname, 'index.html'))

7.运行项目

如果存在路径out\electron-demo-win32-x64\resources\app\package.json，重命名该脚本，避免误点击
方法1 VSCode左下角展开NPM脚本，展开package.json，鼠标移到🔧go electron .脚本上，点击旁边的 ▷ 运行按钮
方法2 终端(T) - 配置默认生成任务，选择npm: go，想要运行项目就使用快捷键Ctrl+Shift+B

运行效果图
正确安装Electron、Electron-quick-start和Electron Forge
☁️啊哈，运行成功☁️

后续只要修改项目文件夹的package.json文件的main配置的路径，就可以修改程序入口，运行不同的程序
(新手肯定要创建一大堆文件夹的，改一下路径很方便)

8.打包与分发的准备工作

命令行窗口输入以下命令

npm install --save-dev @electron-forge/cli

git bash窗口输入以下命令

npm exec --package=@electron-forge/cli -c "electron-forge import"

项目文件夹新建.gitignore文件，文件内输入以下内容保存，VSCode的源代码管理功能的更改数值会瞬间从9k+降至正常水平

node_modules
out

9.真正的创建可分发的应用程序

git bash窗口输入以下命令

npm run make

☁️等待片刻，惊喜即将发生☁️
你将会在out文件夹下找到程序文件夹electron-demo-win32-x64，在out\make\squirrel.windows\x64文件夹下找到安装可执行文件electron-demo-1.0.0 Setup.exe。
如果存在路径out\electron-demo-win32-x64\resources\app\package.json，重命名该脚本，避免误点击

.\ELECTRON-DEMO\OUT
├───electron-demo-win32-x64
│   │   some-files
│   │
│   ├───locales
│   │       zh-CN.pak
│   │       zh-TW.pak
│   │       other-language.pak
│   │
│   └───resources
│       └───app
│           │   some-resources
│
└───make
    └───squirrel.windows
        └───x64
                electron-demo-1.0.0 Setup.exe
                electron_demo-1.0.0-full.nupkg
                RELEASES

10.安全注意

因为electron团队没钱，electron项目比chrome浏览器更容易受攻击，所以新版本已删除的remote功能就不要再安装回去了，强扭瓜不甜
优先使用本地html、preload、ipcMain和ipcRenderer
开启Content-Security-Policy
nodeIntegration、contextIsolation应使用官方建议的默认设置
不建议安装remote
Electron文档 | 安全

正确安装Electron、Electron-quick-start和Electron Forge 文章来源地址https://www.toymoban.com/news/detail-458929.html