一、方式①
根據官網描述將electron/electron-quick-start項目克隆下來并啟動
electron/electron-quick-start地址：
GitHub - electron/electron-quick-start: Clone to try a simple Electron app
git clone https://github.com/electron/electron-quick-start.git
一、方式②
創建自己的項目
1.cmd打開運行窗口
mkdir demo-electron-app && cd demo-electron-app
npm init2.根據提示確認
?3.修改package.json文件
{"name": "demo-electron-app","version": "1.0.0","description": "my-app","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "ljx","license": "ISC"
}
4.安裝electron?
npm容易報錯,建議用cnpm
npm install --save-dev electronpackage.json文件中添加運行命令
"start": "nodemon --watch main.js --exec npm run build", // 如果沒安裝nodemon，這行不要"build": "electron ."
建議：在node環境中，安裝nodemon，官網介紹，自行了解：諾德蒙 - NPM (npmjs.com)
安裝步驟：
- win+r，輸入cmd，打開運行窗口
- 輸入npm install -g nodemon
- nodemon -v檢查是否安裝成功
5.創建index.html文件?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>我的app</title>
</head><body><h1>Hello World!</h1>我們正在使用 Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.
</body></html>6.創建main.js文件
主進程文件
const { app, BrowserWindow } = require('electron')
const path = require('node:path')// 創建窗口
const createWindow = () => {// 設置窗口大小const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 當前窗口顯示的頁面win.loadFile('index.html')
}// app啟動后創建窗口
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 關閉所有窗口時退出應用
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
7.創建preload.js文件
預加載文件，通過 contextBridge 定義一個全局變量 versions 的示例如下：
const { contextBridge } = require('electron/renderer')contextBridge.exposeInMainWorld('versions', {node: () => process.versions.node,chrome: () => process.versions.chrome,electron: () => process.versions.electron
})8.創建renderer.js文件
通過全局變量 versions 可以獲取瀏覽器/node/electron版本信息，并將這些信息插入到html中
const information = document.getElementById('info')
information.innerText = `本應用正在使用 Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), 和 Electron (v${versions.electron()})`?在index.html文件中添加id=info的標簽，并引入render.js文件
<div id="info"></div><script src="./renderer.js"></script>
?9.啟動看效果
npm run build
)
（下）)
)
)
