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

news2024/11/19 18:38:31

在 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();
  }
});