1、初始項目让虐，編輯 package.json
npm init
package.json
{
"name": "myapp",
"version": "1.0.0",
"description": "第一個測試項目",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "jiw",
"license": "ISC"
}
2紊撕、安裝 Electron
npm install --save-dev electron
3、編輯index.js
const { app, BrowserWindow } = require('electron')
// 保持對window對象的全局引用赡突，如果不這么做的話对扶，當(dāng)JavaScript對象被
// 垃圾回收的時候区赵，window對象將會自動的關(guān)閉
let win
function createWindow () {
// 創(chuàng)建瀏覽器窗口。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加載index.html文件
win.loadFile('./src/index.html')
// 打開開發(fā)者工具
win.webContents.openDevTools()
// 當(dāng) window 被關(guān)閉辩稽，這個事件會被觸發(fā)惧笛。
win.on('closed', () => {
// 取消引用 window 對象，如果你的應(yīng)用支持多窗口的話逞泄，
// 通常會把多個 window 對象存放在一個數(shù)組里面，
// 與此同時拜效，你應(yīng)該刪除相應(yīng)的元素喷众。
win = null
})
}
// Electron 會在初始化后并準(zhǔn)備
// 創(chuàng)建瀏覽器窗口時，調(diào)用這個函數(shù)紧憾。
// 部分 API 在 ready 事件觸發(fā)后才能使用到千。
app.on('ready', createWindow)
// 當(dāng)全部窗口關(guān)閉時退出。
app.on('window-all-closed', () => {
// 在 macOS 上赴穗，除非用戶用 Cmd + Q 確定地退出憔四，
// 否則絕大部分應(yīng)用及其菜單欄會保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上般眉，當(dāng)單擊dock圖標(biāo)并且沒有其他窗口打開時了赵，
// 通常在應(yīng)用程序中重新創(chuàng)建一個窗口。
if (win === null) {
createWindow()
}
})
// 在這個文件中甸赃，你可以續(xù)寫應(yīng)用剩下主進程代碼柿汛。
// 也可以拆分成幾個文件，然后用 require 導(dǎo)入埠对。
4络断、編輯index.html,顯示當(dāng)前環(huán)境版本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個應(yīng)用!</title>
</head>
<body>
<h1>我的第一個應(yīng)用!</h1>
Node版本：<script>document.write(process.versions.node)</script><br />
Chrome版本：<script>document.write(process.versions.chrome)</script><br />
Electron版本：<script>document.write(process.versions.electron)</script><br />
</body>
</html>
5、啟動你的應(yīng)用
在創(chuàng)建并初始化完成 main.js项玛、 index.html和package.json之后貌笨，您就可以在當(dāng)前工程的根目錄執(zhí)行 npm start 命令來啟動剛剛編寫好的Electron程序了。
TIM截圖20191016143714.png
