Jasper Jiang'Blog

Electron框架

3 min

什么是electron

  • 用于使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用程序

如何构建

以下是如何使用这三者来构建一个前端使用 Vue，后端使用 Go 的 Electron 应用的详细步骤：

1. 设置项目结构

创建一个包含 Electron 主进程、Vue 前端代码和 Go 后端服务的项目结构：

project-root/
├── backend/
│   ├── main.go
│   └── go.mod
├── frontend/
│   ├── public/
│   ├── src/
│   ├── .browserslistrc
│   ├── .gitignore
│   ├── babel.config.js
│   ├── package.json
│   ├── README.md
│   ├── vue.config.js
│   ├── yarn.lock
│   └── ...
├── electron-app/
│   ├── main.js
│   ├── preload.js
│   ├── package.json
│   └── ...
└── README.md

2. 设置 Go 后端

在 backend/main.go 中编写 Go 代码，提供一个简单的 HTTP 服务器：

编译并运行 Go 服务：

go run main.go

3. 设置 Vue 前端

在 frontend 文件夹中初始化 Vue 项目（使用 Vue CLI）：

cd frontend
vue create .

在 vue.config.js 中配置开发服务器代理，以便在开发时将 API 请求转发到 Go 后端：

javascriptCopy codemodule.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

4. 设置 Electron 主进程

在项目根目录中创建 main.js，配置 Electron 主进程：

javascriptCopy codeconst { app, BrowserWindow } = require('electron');
const path = require('path');
const { exec } = require('child_process');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: false,
      nodeIntegration: true,
    },
  });

  mainWindow.loadURL('http://localhost:8080');
}

app.on('ready', () => {
  // Start the Go backend
  const goBackend = exec('go run ./backend/main.go');

  goBackend.stdout.on('data', (data) => {
    console.log(`Go backend: ${data}`);
  });

  goBackend.stderr.on('data', (data) => {
    console.error(`Go backend error: ${data}`);
  });

  createWindow();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

5. 安装依赖并运行

在项目根目录中初始化并安装 Electron 依赖：

npm init -y
npm install electron --save-dev

在 package.json 中添加启动脚本：

jsonCopy code{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "concurrently \"npm run backend\" \"npm run serve\" \"npm run electron\"",
    "backend": "cd backend && go run main.go",
    "serve": "cd frontend && vue-cli-service serve",
    "electron": "wait-on http://localhost:8080 && electron ."
  },
  "devDependencies": {
    "concurrently": "^6.2.1",
    "electron": "^13.1.7",
    "wait-on": "^5.3.0"
  }
}

运行应用：

npm start

6. 总结

通过以上步骤，你可以使用 Electron、Vue 和 Go 来构建一个跨平台的桌面应用：

  • Electron 提供桌面应用的容器。
  • Vue 提供现代化的前端开发框架。
  • Go 提供高效的后端服务。
大二