- 推荐使用vscode编辑器
- nodejs 环境，网上有很多，不重新赘述
- 全局安装electron
npm install -g electron
- 创建一个文件夹app并且初始化一个项目, 此时会生成一个package.json文件
npm init -y
package.json
{
"name": "elecApp",
"version": "1.0.0",
"description": "",
"main": "index.js", //注意： 将此处的index.js改成main.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^1.7.9"
}
}
- 进入app文件夹，并且安装依赖electron
cd app/
npm install --save electron
- 创建一个main.js文件，内容如下：
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let win;
const createWindow = () => {
win = new BrowserWindow({
width: 800,
height: 600
});
const URL = url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
});
console.log(URL);
win.loadURL(URL);
win.webContents.openDevTools();
win.on('close', () => {
win = null;
}) ;
}
app.on('ready', createWindow);
app.on('window-all-close', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
- 新建一个index.html文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第一个electron程序</title>
</head>
<body>
<h1>hello electron</h1>
</body>
</html>
- 点击vscode调试工具，加入electron main程序，点击运行，即刻看到结果
