- Electron 是一個(gè)基于 Node.js 和 Chromium 的框架，因此需要安裝 Node.js 和 npm（Node.js 的包管理器）
- 環(huán)境：macOS
- 框架：Electron
- 輸出目標(biāo)端：Windows,MacOS,Linux
概念
- Electron: 桌面應(yīng)用框架，以來(lái)Node
- Node.js：運(yùn)行 JavaScript 的環(huán)境，是 Electron 的底層依賴
- npm:
Node Package Manager。Node.js 自帶的包管理器，用于安裝第三方庫(kù)（包括 Electron） - nvm:
Node Version Manager。用于安裝/切換多個(gè) Node（和 npm）版本┌────────────────────────────────────────┐ │ nvm │ │ → 管理多個(gè) Node（和 npm）版本 │ └────────────────────────────────────────┘ │ ▼ ┌─────────────────┐ ┌──────────────┐ │ node │?───?│ npm │ │ JavaScript運(yùn)行時(shí) │ │ 包管理工具 │ └─────────────────┘ └──────────────┘ │ ▼ ┌───────────────────────┐ │ Electron │ │ 桌面應(yīng)用框架，依賴 Node │ └───────────────────────┘
安裝Node.js
- 從Node.js官方網(wǎng)站安裝
- 或者 使用
Homebrew安裝brew install node - 驗(yàn)證
node -v npm -v - 查看本地裝了多少個(gè)版本npm
nvm ls - 設(shè)置默認(rèn)node版本
nvm alias default xx(版本號(hào))
安裝Electron
-
Electron官方手動(dòng)下載：
- 下載與系統(tǒng)，架構(gòu)匹配的版本的二進(jìn)制文件
- 將下載的文件放到/.electron目錄下(或其他指定目錄)
- 通過(guò) npm 安裝 Electron
(安裝了 Node.js 和 npm，就可以通過(guò) npm 安裝 Electron):-
安裝到當(dāng)前項(xiàng)目
(推薦)，先創(chuàng)建了項(xiàng)目的前提下:npm install electron --save-dev -
安裝到全局
(不推薦)：npm install -g electron //or npm install -g electron --loglevel verbose- 沒(méi)用
nvm激活管理node版本，electron全局路徑是/usr/local/lib/node_modules/electron。對(duì)應(yīng)執(zhí)行文件在/usr/local/bin/electron - 使用
nvm并切換了Node版本(nvm use version)，electron全局路徑是~/.nvm/versions/node/<version>/lib/node_modules/electron
- 沒(méi)用
-
安裝指定緩存路徑：
npm install -g electron --cache ~/.electron
-
- 驗(yàn)證安裝是否成功:
electron --version - ??
如果因?yàn)榫W(wǎng)路問(wèn)題，安裝失敗，則設(shè)立淘寶國(guó)內(nèi)鏡像：npm config set registry https://registry.npmmirror.com
- 當(dāng)前項(xiàng)目安裝：
每個(gè) Electron 項(xiàng)目都有自己獨(dú)立的依賴，通常會(huì)在每個(gè)新項(xiàng)目中安裝 Electron，確保每個(gè)項(xiàng)目使用自己特定版本的 Electron。這是最常見(jiàn)的做法。保證項(xiàng)目依賴和 Electron 版本的獨(dú)立性。適應(yīng)不同項(xiàng)目中可能需要不同版本的 Electron。方便團(tuán)隊(duì)協(xié)作和版本控制。
- 全局安裝:
全局安裝 Electron，通常不推薦用于項(xiàng)目開(kāi)發(fā)，因?yàn)樗鼤?huì)導(dǎo)致不同項(xiàng)目間使用不同版本時(shí)可能出現(xiàn)兼容性問(wèn)題。- ??????全局安裝路徑
/usr/local/lib/node_modules/electron：- 這是系統(tǒng)級(jí)全局安裝的 npm 包路徑.
- 通常用
npm install -g electron安裝的 Electron 會(huì)在這里。 - 作用域系統(tǒng)全局，不依賴任何 Node 版本管理工具。
- ?????? 全局安裝路徑
~/.nvm/versions/node/v20.19.2/lib/node_modules/electron:- 這是 nvm 管理的特定 Node 版本（v20.19.2）對(duì)應(yīng)的全局 npm 包路徑。
- 通常用
nvm use 20.19.2激活了版本管理，后續(xù)通過(guò)npm install -g electron安裝就會(huì)在這里。
- 查看Electron 路徑：
which electron # 或 npm root -g
新建一個(gè)Electron項(xiàng)目
- 創(chuàng)建一個(gè)新項(xiàng)目：
mkdir my-electron-app - 初始化一個(gè)
Node.js項(xiàng)目：npm init -y - 在項(xiàng)目根目錄，創(chuàng)建一個(gè)
main.js的文件，內(nèi)容如下：const { app, BrowserWindow } = require('electron'); let mainWindow; app.on('ready', () => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, // 允許在頁(yè)面中使用 Node.js }, }); mainWindow.loadFile('index.html'); // 加載主頁(yè)面 }); ///當(dāng)關(guān)閉 窗口時(shí)候，如果是非macos環(huán)境，則退出。 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); ///窗口激活時(shí)，mac環(huán)境下，當(dāng)窗口縮小時(shí)，實(shí)際上并沒(méi)有退出，所以判斷如果當(dāng)前窗口等數(shù)量是0，則 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) - 在項(xiàng)目根目錄，創(chuàng)建一個(gè)
index.html文件，內(nèi)容如下：<!DOCTYPE html> <html> <head> <title>My First Electron App</title> </head> <body> <h1>Hello, Electron!</h1> <p>Welcome to your first Electron app.</p> </body> </html> - 配置
package.json信息，用于啟動(dòng)應(yīng)用程序{ "name": "electrondemo", "productName": "electrondemo", "version": "1.0.0", "description": "My Electron application description", "main": "src/main.js", "scripts": { "start": "electron ." }, "devDependencies": { "electron": "33.2.0" }, "keywords": [], "author": { "name": "tucici", "email": "290255613@qq.com" }, "license": "MIT" } - 啟動(dòng)
electron應(yīng)用npm start
到這里簡(jiǎn)單的創(chuàng)建一個(gè)electron項(xiàng)目就完成了
一些常用插件
