Electron + Ant Design Pro + Electron-Builder：构建桌面应用的利器
2023-12-05 17:22:37
Electron 是一个基于 Chromium 和 Node.js 的框架，可以用来构建跨平台的桌面应用程序。Ant Design Pro 是一个基于 Ant Design 的前端 UI 框架，提供了丰富的组件和样式，可以快速构建出漂亮的界面。Electron-Builder 是一个用于构建和打包 Electron 应用的工具，可以轻松地将你的应用打包成可执行文件，以便在不同的平台上运行。
Electron + Ant Design Pro + Electron-Builder 的优势
使用 Electron + Ant Design Pro + Electron-Builder 来构建桌面应用，具有以下优势：
- 跨平台支持： Electron 可以让你轻松地将你的应用打包成 Windows、Mac 和 Linux 等不同平台的可执行文件。
- 丰富的 UI 组件： Ant Design Pro 提供了丰富的 UI 组件，可以快速构建出漂亮的界面。
- 简单易用： Electron-Builder 可以轻松地将你的应用打包成可执行文件，以便在不同的平台上运行。
- 强大的扩展性： Electron 允许你使用 Node.js 来编写后端代码，这意味着你可以使用 JavaScript 来访问各种系统资源，如文件系统、网络和数据库。
如何使用 Electron + Ant Design Pro + Electron-Builder 构建桌面应用
下面我们将一步一步地介绍如何使用 Electron + Ant Design Pro + Electron-Builder 来构建一个简单的桌面应用。
1. 创建 Electron 项目
首先，我们需要创建一个 Electron 项目。可以使用 Electron CLI 来快速创建项目。在命令行中运行以下命令：
npx create-electron-app my-app
这将创建一个名为 my-app 的 Electron 项目。
2. 安装 Ant Design Pro
接下来，我们需要安装 Ant Design Pro。在命令行中运行以下命令：
cd my-app
npm install antd-pro
这将安装 Ant Design Pro 和它的依赖包。
3. 创建 Electron 主进程脚本
Electron 应用由主进程脚本和渲染进程脚本两部分组成。主进程脚本负责处理应用的启动、窗口创建和关闭等操作，而渲染进程脚本负责处理界面的渲染和用户交互。
在 my-app 项目中，主进程脚本位于 main.js 文件中。我们可以打开 main.js 文件，并添加以下代码：
const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.loadFile('index.html')
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
这段代码创建了一个新的 Electron 窗口，并加载了 index.html 文件。
4. 创建 Electron 渲染进程脚本
渲染进程脚本负责处理界面的渲染和用户交互。在 my-app 项目中，渲染进程脚本位于 index.html 文件中。我们可以打开 index.html 文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
这段代码创建了一个简单的 HTML 页面，上面写着 "Hello World!"。
5. 使用 Ant Design Pro 构建界面
现在，我们可以使用 Ant Design Pro 来构建我们的界面的用户界面（UI）。在命令行中运行以下命令：
npm run start
这将启动一个开发服务器，并打开一个浏览器窗口。在浏览器窗口中，你可以看到 Ant Design Pro 的 UI 组件库。
你可以拖拽组件到页面上，并设置它们的属性。你还可以使用 Ant Design Pro 的主题功能来改变界面的样式。
6. 打包 Electron 应用
当你的界面构建完成后，你可以使用 Electron-Builder 来将你的应用打包成可执行文件。在命令行中运行以下命令：
npm run build
这将创建一个名为 my-app-darwin-x64 的文件夹，其中包含了你的应用的可执行文件。你可以将这个文件夹复制到其他电脑上，并在那里运行你的应用。
总结
以上就是使用 Electron + Ant Design Pro + Electron-Builder 来构建桌面应用的教程。希望这篇教程能帮助你快速入门 Electron 开发。
