文章目录
准备工作
- 安装Node.js的LTS版本
- 要检查 Node.js 是否正确安装,请在您的终端输入以下命令,查看安装版本:
node -v
npm -v
一、安装Electron
- 在命令行模式下进入创建应用的文件夹,然后输入下面的安装命令。
npm install electron --save-dev
- 命令执行完后,文件夹中包含如下内容。
二、初始化npm项目
- Electron 应用基于 npm 搭建,以 package.json 文件作为入口点。
npm init
-
执行完如上命令后,package.json文件会被修改。可以全部按照默认选项设置,结束后再修改package.json内容。
-
修改后package.json文件内容
//package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!", //重点,用于打包软件
"main": "main.js", //重点,程序入口
"scripts": {
"start": "electron .", //重点,start命令用于开发模式下启动应用
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe", //重点,用于打包软件
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}
三、创建main.js
- 创建main.js,并写入以下内容:
console.log('welcome Electron')
四、运行
- 命令行运行如下命令
npm start
或
npm run start
运行结果如下:
到目前为止Electron应用就跑起来了,接下来,我们试一下显示页面。
五、添加index.html文件
- 新建index.html文件,并添加如下内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<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'"
/>
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
<p>👋</p>
</body>
</html>
六、修改main.js文件
- main.js修改为如下内容:
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
- 项目目录
七、运行
- 命令行运行如下命令
npm start
或
npm run start
运行结果如下:
八、mian.js修改后,程序自动刷新
- 修改package.json中的scripts代码,如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --watch main.js --exec npm run build",
"build": "electron ."
},
npm start
运行,这样每次修改main.js后,程序都自动重新编译。- 如果提示nodemon不是内部或外部命令,则nodemon没有安装,安装命令如下:
npm install nodemon –g
九、程序打包发布
- 基于上面第七个步骤
- package.json中的"author"和"description"不能为空
- 将electron forge添加到应用的开发依赖中。
npm install --save-dev @electron-forge/cli
- 并使用import命令设置forge
npx electron-forge import
- 执行完上一个命令后,package.json会变成如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron-forge start", //改变了
"package": "electron-forge package", //改变了
"make": "electron-forge make" //改变了
},
- 使用forge的make命令来创建打包的应用程序
npm run make
- electron-forge会创建out文件夹,打包的应用在out文件夹中