Electron应用环境示例

1.安装nodejs

2.安装npm(新版nodejs已集成)

编辑npm配置npm config edit

在打开的文件中可以修改或添加镜像

registry=https://mirrors.huaweicloud.com/repository/npm/
electron-builder-binaries_mirror=https://mirrors.huaweicloud.com/electron-builder-binaries/
chromedriver_cdnurl=https://mirrors.huaweicloud.com/chromedriver/
electron_mirror=https://mirrors.huaweicloud.com/electron/

3.确定node和npm版本

node -v

npm -v

全局安装 electron，electron-packager ，electron-builder

npm install electron@22.3.9 -g

npm install electron -g

npm install electron-packager -g

npm install electron-builder -g

说明：electron-packager直接打包成可执行文件 ，electron-builder可打包成安装文件。

4.创建应用存储目录

mkdir demo01

5.初始化应用目录

cd demo01

npm init

初始化之后会生成 package.json文件，文件内容如下

{
"name": "demo01",
"version": "0.0.1",
"description": "demo01",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^22.3.9"
}
}

6.npm安装electron

先刷新npm缓存

npm cache clean --force

再安装

npm install --save-dev electron@22.3.9

@后面的为electron版本号

7.创建应用文件

main.js

index.html

preload.js

项目目录

demo01 
| -- node_modules 
| -- main.js 
| -- index.html 
| -- preload.js 
| -- package.json

8.运行应用

在DOS中cd到你的项目目录，或者在你的项目目录下空白的地方 shift+鼠标右键，然后点击在此处打开命令窗口。

npm start

9.项目打包

npm install electron-packager -g

打包项目命令参考：

electron-packager . app --win --out presenterTool --arch=x64 --app-version 1.4.14 --overwrite --ignore=node_modules

electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --app-version版本号 --overwrite --ignore=node_modules