Refer to the official document process quick start | Electron
It is recommended to install electron globally first, npm install -g electron can be developed and installed locally during the development process
Use electron to quickly create a web page, refer to the official demo example electron-quick-start
first step:
- mkdir my-electron-app && cd my-electron-app creates a folder and enters the file
- npm init initialization file
- npm install --save-dev electron install electron environment
- Finally, you want to be able to execute Electron as follows, add a command under the field in your package.json configuration file :
scriptsstart{
"scripts": {
"start": "electron ."
}
}
Step two:
Create the main.js entry file in your local file and import electron
const { app, BrowserWindow } = require("electron");
app.whenReady().then(() => {
// 创建一个web窗口
const mainWin = new BrowserWindow({
width: 600,
height: 400,
});
// 引入页面要展示的文件
mainWin.loadFile("index.html");
// 监听当前窗口关闭要做的事情
mainWin.on("close", () => {
console.log("close");
});
});
// 监听所有窗口关闭要做的事情
app.on("window-all-closed", () => {
console.log("window-all-closed");
app.quit(); // 窗口关闭api
});
third step:
Create index.html this time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>桌面应用</div>
</body>
</html>the fourth step:
Run the npm start command to display the following interface
