探索 Electron-Vue 的 main.js 文件

2023-12-04 00:13:45

使用 Electron-Vue 打造跨平台桌面应用程序：mian=>index.js

前言

Electron-Vue 是一种流行的框架，用于构建跨平台桌面应用程序，它结合了 Electron 和 Vue.js 的强大功能。在本文中，我们将深入探讨 Electron-Vue 配置文件的核心文件：main.js。

main.js 文件概述

main.js 是 Electron 应用程序的入口点。它负责初始化应用程序并创建浏览器窗口，用户将在其中与应用程序交互。让我们分解一下它的主要部分：

应用程序初始化

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

此代码导入 Electron 模块中的关键组件：

app：代表整个应用程序。
BrowserWindow：创建浏览器窗口的类。
Tray：用于创建系统托盘图标。
Menu：用于创建应用程序菜单。

创建浏览器窗口

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadFile('index.html')
}

此函数创建一个新的浏览器窗口：

width 和 height 指定窗口的尺寸。
webPreferences 对象配置窗口中的 Web 偏好设置。
nodeIntegration 允许在渲染器进程中访问 Node.js 环境。
mainWindow.loadFile('index.html') 将 index.html 文件加载到浏览器窗口中。

应用程序生命周期事件

app.on('ready', createWindow)

此事件侦听器在应用程序准备好创建其窗口时触发。它调用 createWindow 函数来创建浏览器窗口。

托盘图标

const appIcon = new Tray('./assets/icon.png')

此代码创建了一个系统托盘图标。您可以使用 appIcon.setImage 方法设置自定义图标。

应用程序菜单

const template = [
  {
    label: 'File',
    submenu: [
      {
        label: 'Open',
        click: async () => {
          // Open file dialog here
        }
      },
      {
        label: 'Save',
        click: async () => {
          // Save file here
        }
      }
    ]
  },
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)