再此之前你需要安裝node 官方下載：https://nodejs.org/en/download/ 安裝好之後在命令行中輸入 node -v 可查看到node的版本號即可
1.創建一個空文件夾,在該文件夾中運行
npm init
運行後需要輸入項目名稱版本描述各種,一切默認即可,完成後會在文件夾中生成 package.json 文件,這裏稍加修改
{
"name": "helloelectron",
"version": "1.0.0",
"description": "",
"main": "main.js", //mian字段對應主程序入口,默認是index.js這裏我將它修改成了mian.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ." //添加啓動命令
},
"author": "",
"license": "ISC"
}
2.安裝ELectron 運行以下命令
npm install --save-dev electron
最基本的 Electron 應用一般來說會有如下的目錄結構： 所以我們要新建main.js和index.html
your-app/
├── package.json
├── main.js
└── index.html
3.新建 main.js 文件,添加以下代碼
const { app, BrowserWindow } = require('electron')
// 保持對window對象的全局引用，如果不這麼做的話，當JavaScript對象被
// 垃圾回收的時候，window對象將會自動的關閉
let win
function createWindow () {
// 創建瀏覽器窗口。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加載index.html文件
win.loadFile('index.html')
// 打開開發者工具
win.webContents.openDevTools()
// 當 window 被關閉，這個事件會被觸發。
win.on('closed', () => {
// 取消引用 window 對象，如果你的應用支持多窗口的話，
// 通常會把多個 window 對象存放在一個數組裏面，
// 與此同時，你應該刪除相應的元素。
win = null
})
}
// Electron 會在初始化後並準備
// 創建瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow)
// 當全部窗口關閉時退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其菜單欄會保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
// 通常在應用程序中重新創建一個窗口。
if (win === null) {
createWindow()
}
})
// 在這個文件中，你可以續寫應用剩下主進程代碼。
// 也可以拆分成幾個文件，然後用 require 導入。
4.新建 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
5.啓動Electron
npm start
一個最基本的demo已經完成
Electron 打包
1.安裝打包工具
npm install electron-packager -g
2.配置打包命令 在package.json 的 scripts 中添加
{
"name": "helloelectron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"pack": "electron-packager . myClient --win --out ./myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" //添加這句打包命令
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^5.0.1"
}
}
"." 需要打包的應用目錄（即當前目錄）
"myClient" 應用名稱
"--win" 打包平臺（以Windows爲例）
"--out ./myClient" 輸出目錄
"--arch=64" 64位
"--app-version=0.0.1" 應用版本
"--electron-version=2.0.0" electron版本
3.運行打包命令
npm run pack
我們已經得到了應用程序的綠色版本(無需安裝，拷貝整個文件目錄之後即可使用),進到輸出目錄,雙擊myClient.exe就可以打開應用程序了
