安装 electron
$ npm install -g electron
克隆一个仓库、快速启动一个项目
# 克隆实例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start
手动创建一个 electron 项目
# 1、新建一个项目 目录
$ mkdir electrondemo01
# 2、在 electrondemo01 生成 package.json 文件，入口文件main.js
$ npm init
# 3. 在当前目录下创建index.html main.js
$ touch index.html main.js
package.json
{
"name": "electrondemo01",
"version": "1.0.0",
"description": "learn electron for demo",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": ["electron", "nodejs"],
"author": "lishaohai",
"license": "ISC"
}
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>Document</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
main.js
const electron = require('electron'); //electron 对象的引用
const app = electron.app; //BrowserWindow 类的引用
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null; //监听应用准备完成的事件
app.on('ready', function() {
//创建窗口
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadFile('index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
//监听所有窗口关闭的事件
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
运行
$ npm start OR $ electron .
网友评论