Electron

Electron 是一个基于 Node.js 和 Chromium 的框架，因此需要安装 Node.js 和 npm（Node.js 的包管理器）
环境：macOS
框架：Electron
输出目标端：Windows,MacOS,Linux

概念

Electron: 桌面应用框架，以来Node
Node.js：运行 JavaScript 的环境，是 Electron 的底层依赖
npm: Node Package Manager。Node.js 自带的包管理器，用于安装第三方库（包括 Electron）

nvm: Node Version Manager。用于安装/切换多个 Node（和 npm）版本

 ┌────────────────────────────────────────┐
 │                   nvm                  │
 │       → 管理多个 Node（和 npm）版本       │
 └────────────────────────────────────────┘
                      │
                      ▼
 ┌─────────────────┐     ┌──────────────┐
 │     node        │◀───▶│     npm      │
 │ JavaScript运行时 │     │ 包管理工具     │
 └─────────────────┘     └──────────────┘
                      │
                      ▼
        ┌───────────────────────┐
        │        Electron       │
        │ 桌面应用框架，依赖 Node  │
        └───────────────────────┘

安装Node.js

从Node.js官方网站安装
或者使用Homebrew安装
```
brew install node
```
验证
```
node -v
npm -v
```
查看本地装了多少个版本npm
```
nvm ls
```
设置默认node版本
```
nvm alias default xx(版本号)
```

安装Electron

Electron官方手动下载：
- 下载与系统，架构匹配的版本的二进制文件
- 将下载的文件放到/.electron目录下(或其他指定目录)
通过 npm 安装 Electron(安装了 Node.js 和 npm，就可以通过 npm 安装 Electron):
- 安装到当前项目(推荐)，先创建了项目的前提下:
```
npm install electron --save-dev
```
- 安装到全局(不推荐)：
```
npm install -g electron
 //or
npm install -g electron --loglevel verbose
```
  - 没用nvm激活管理node版本，electron全局路径是/usr/local/lib/node_modules/electron。对应执行文件在/usr/local/bin/electron
  - 使用nvm并切换了Node版本(nvm use version)，electron全局路径是~/.nvm/versions/node/<version>/lib/node_modules/electron
- 安装指定缓存路径：
```
npm install -g electron --cache ~/.electron
```
验证安装是否成功:
```
electron --version
```
⚠️如果因为网路问题，安装失败，则设立淘宝国内镜像：
```
npm config set registry https://registry.npmmirror.com
```

当前项目安装：
- 每个 Electron 项目都有自己独立的依赖，通常会在每个新项目中安装 Electron，确保每个项目使用自己特定版本的 Electron。这是最常见的做法。
- 保证项目依赖和 Electron 版本的独立性。
- 适应不同项目中可能需要不同版本的 Electron。
- 方便团队协作和版本控制。
全局安装:
- 全局安装 Electron，通常不推荐用于项目开发，因为它会导致不同项目间使用不同版本时可能出现兼容性问题。
- ⚠️⚠️⚠️全局安装路径/usr/local/lib/node_modules/electron：
  - 这是系统级全局安装的 npm 包路径.
  - 通常用 npm install -g electron 安装的 Electron 会在这里。
  - 作用域系统全局，不依赖任何 Node 版本管理工具。
- ⚠️⚠️⚠️ 全局安装路径~/.nvm/versions/node/v20.19.2/lib/node_modules/electron :
  - 这是 nvm 管理的特定 Node 版本（v20.19.2）对应的全局 npm 包路径。
  - 通常用nvm use 20.19.2激活了版本管理，后续通过npm install -g electron安装就会在这里。
- 查看Electron 路径：
```
which electron
# 或
npm root -g
```

新建一个Electron项目

创建一个新项目：
```
mkdir my-electron-app
```
初始化一个Node.js项目：
```
npm init -y
```

在项目根目录，创建一个main.js的文件，内容如下：

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
         nodeIntegration: true, // 允许在页面中使用 Node.js
     },
});

mainWindow.loadFile('index.html'); // 加载主页面
});

///当关闭 窗口时候，如果是非macos环境，则退出。
app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') {
  app.quit();
 }
});

///窗口激活时，mac环境下，当窗口缩小时，实际上并没有退出，所以判断如果当前窗口等数量是0，则
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

在项目根目录，创建一个index.html文件，内容如下：

<!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信息，用于启动应用程序

{
 "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"
}

启动electron应用
```
npm start
```

到这里简单的创建一个electron项目就完成了

一些常用插件

Electron

Electron

概念

安装Node.js

安装Electron

新建一个Electron项目

到这里简单的创建一个electron项目就完成了

一些常用插件

相关阅读更多精彩内容

友情链接更多精彩内容