【Electron】Electron Forge如何支持Element plus？

在 Electron Forge 项目中集成 Element Plus 是一个相对直接的过程。Element Plus 是一个基于 Vue 3 的 UI 组件库，因此你需要确保你的 Electron 项目已经集成了 Vue 3。以下是集成 Element Plus 到 Electron Forge 项目的步骤：

1. 初始化 Electron Forge 项目

如果你还没有创建项目，可以通过 Electron Forge 快速创建一个：

npx @electron-forge/cli init my-electron-app
cd my-electron-app

2. 安装 Vue 3 和 Vite（可选）

为了更好地支持 Vue 3，建议使用 Vite 作为构建工具。Vite 是一个由 Vue.js 作者尤雨溪开发的现代前端构建工具，它提供了更快的开发体验。

npm install -D vite vue

3. 创建 Vue 3 项目结构

在 src 目录下创建一个基本的 Vue 3 项目结构。例如：

src/main.js：Vue 3 的入口文件
src/App.vue：Vue 3 的根组件
src/main.html：HTML 模板文件

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');

<!-- src/App.vue -->
<template><div id="app"><h1>Hello, Electron Forge with Vue 3 and Element Plus!</h1></div>
</template><script>
export default {name: 'App'
};
</script>

<!-- src/main.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Electron Forge with Vue 3 and Element Plus</title>
</head>
<body><div id="app"></div>
</body>
</html>

4. 安装 Element Plus

安装 Element Plus 和其样式文件：

npm install element-plus

5. 引入 Element Plus

在 src/main.js 中引入 Element Plus 并注册全局组件：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

6. 使用 Element Plus 组件

现在你可以在你的 Vue 组件中使用 Element Plus 提供的组件了。例如，在 src/App.vue 中添加一个按钮：

<!-- src/App.vue -->
<template><div id="app"><h1>Hello, Electron Forge with Vue 3 and Element Plus!</h1><el-button type="primary">Primary Button</el-button></div>
</template><script>
export default {name: 'App'
};
</script>

7. 配置 Vite

确保你的 vite.config.js 文件正确配置了 Vite：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {port: 3000,},
});

8. 修改 Electron 主进程文件

确保你的 Electron 主进程文件（通常是 src/index.js 或 src/main.js）正确加载了 Vite 开发服务器。例如：

// src/main.js (Electron 主进程)
const { app, BrowserWindow } = require('electron');
const path = require('path');
const { start } = require('child_process');function createWindow() {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation: false,},});if (process.env.NODE_ENV === 'development') {// 在开发模式下，使用 Vite 开发服务器mainWindow.loadURL('http://localhost:3000');} else {// 在生产模式下，加载构建后的文件mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));}
}app.whenReady().then(() => {createWindow();app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});