原创文章，转载请注明出处
附官方文档链接：http://www.electronjs.org/docs/tutorial/first-app
- 创建空文件夹，执行
npm init，生成package.json文件 - 安装依赖
npm install --save-dev electron - 在
package.json文件中scripts添加"start": "electron ."，此步可预览项目 - 创建
main.js文件 - 在
main.js文件添加以下代码(至于代码什么意思，都有注释，自己自行查看，再不行看文档)
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且为你的应用加载index.html
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。
- 将
package.json文件中的启动文件设置为main.js，如："main": "main.js",,package.json文件代码附上，如下：
{
"name": "ele-platform",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^9.0.5"
}
}
- 执行
npm start运行查看项目 - 自此，创建完毕
