這幾天到年底了，公司也沒啥事，閑着就到處瞅瞅。記得上一家公司的時候用 Electron+ng1 寫過項目，只是那個時候項目框架都是別人搭的，自己只負責寫功能，對Electron沒啥認識。 這幾天想着反正閑着也是閑着，就撿起來自己玩玩，順便記錄一下。
一、環境安裝：
前端開發，現在不管是那個方向，都免不了使用NPM，所以node.js的安裝是必須的，也是最基礎的一步。
1、安裝node.js，從官網 https://nodejs.org/en/ 下載當前node.js LTS包(穩定版本)，下載完成后，雙擊執行。安裝完成后，通過CMD命令行 可以看到當前node、npm版本號。
2、npm安裝完成后，接下來安裝electron。
npm install -g electron 或 cnpm install -g electron (不會cnpm 自行度娘cnpm)
注：npm安裝，由於資源服務器在國外，請求資源網速較慢，在node install.js 會卡很久(甚至下載失敗)，所以建議用 cnpm 安裝。
npm 終於安裝完成了(足足花了40分鍾)。
二、創建項目：
npm 和 electron 安裝完成后，接下來就可以創建項目了。創建項目有以下三種方式：Git拷貝、通過electron社群提供的命令行工具(CLI) electron-forge 創建項目、直接創建
(1)、Git拷貝：Git拷貝，實際就是復制官方 "嘗試此例" 代碼結構，然后根據自身項目需求進行修改。
復制並運行這個庫 electron/electron-quick-start
a：新建一個文件夾(路勁中不能含有中文) 克隆這個倉庫：https://github.com/electron/electron-quick-start.git
b：通過命令行(CMD)進入該項目文件夾 electron-quick-start 或代碼編輯工具(vscode、webstorm)等直接打開該項目。
c：進入項目文件夾或打開該項目后，需要安裝項目運行的依賴庫，直接執行命令： npm install
d：依賴庫安裝完成，就可以啟動該應用了，執行命令： npm start
(2)、第二種是通過electron社群提供的命令行工具(CLI) electron-forge 創建項目。
electron-forge 官網：https://www.npmjs.com/package/electron-forge 或 https://www.worldlink.com.cn/osdir/electron-forge.html
這種方法，前提是先安裝CLI工具 electron-forge。由於是CLI工具，便於以后使用，建議全局安裝(和安裝electron一樣，只需首次安裝即可)。
npm install -g electron-forge 或 cnpm install -g electron-forge
electron-forge安裝完成后，通過執行命令：electron-forge init XXXXXX創建項目，其中XXXXXX 既是新建項目的項目名稱，同時會新建XXXXXX文件夾以存放項目源文件。
electron-forge init electronTest
，Installing NPM Dependencies 和安裝electron一樣，會比較久，耐心等候。
注： 安裝模塊過程中，若安裝失敗則刪掉node_modules文件夾，重新進入到項目文件夾或打開項目 執行npm install 或 cnpm install 即可。
等待 Installing NPM Dependencies 執行完成后，進入到項目文件夾XXXXXX(是該項目的文件夾，不是創建該項目的文件夾，創建該項目的文件夾是該項目的父級文件夾)或打開項目XXXXXX 執行命令： npm start 啟動當前項目(通過 electron-forge 創建的項目，在 npm start 啟動項目時或項目打包時，會優先檢測系統環境 Checking your system)。
(3)、第三種是新建各種文件，直接創建項目。
a：新建一個文件夾 （該文件夾既是項目名稱，同時用以存放項目源文件。注：文件夾名稱不能含有中文）
b：通過命令行(CMD)進入該新建文件夾 或 代碼編輯工具(vscode、webstorm)等直接打開該新建文件夾 新建一個 index.html 和一個main.js 文件。同時將下面 入門 內的代碼分別復制到對應的文件。
c：初始化 package.json 文件（用以存放項目配置參數），執行命令 npm init，然后根據提示進行參數填寫。（注： package.json文件 可以自己新建，也可以不新建。npm init 命令執行完畢后，會自動生成。特注：package.json里面配置項 entry point ： 對應的JS文件(此處為main.js)必須是入口 JS (主進程所在JS文件)）
npm init
d：index.html 和 main.js 新建完成，package.json配置初始化完成，接下來局部安裝 electron (之前是全局安裝的)，執行命令：npm install --save-dev electron(安裝時間還是一如既往的長) 或 cnpm install --save-dev electron。
npm install --save-dev electron 或 cnpm install --save-dev electron
安裝項目依賴包：npm install 或 cnpm install
npm install 或 cnpm install
e：文件新建完成，依賴包正常安裝完成。最后一步 啟動當前項目：npm start
三、入門：
index.html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
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 導入。
package.json文件
{ "name": "electron-self-built", "version": "1.0.0", "description": "electronSelfBuilt", "main": "main.js", "scripts": { "start": "electron .", "package": "electron-packager . myClient --win --out myClient --arch=x64 --electron-version=7.1.9" // electron-packager 打包配置 }, "author": "", "license": "ISC", "devDependencies": { "electron": "^7.1.9" }, "private": true }
文檔注釋很清楚。