Vue3 + Vite + Electron 打造桌面应用：创建窗口参数详解

随着 Web 技术的不断发展，越来越多的桌面应用开始采用 Web 技术进行开发，而 Electron 正是一种基于 Web 技术的桌面应用开发框架，可以让开发者使用 HTML、CSS 和 JavaScript 等 Web 技术来开发跨平台的桌面应用程序。

在使用 Electron 进行开发时，创建窗口是一个非常基础和重要的操作，因此本篇文章将会讲解如何使用 Vue3 + Vite + Electron 创建窗口，并详细介绍创建窗口时所需的各种参数。

首先，我们需要在项目中安装 electron 和 electron-builder 两个依赖：

npm install electron electron-builder --save-dev

接下来，在 main 目录下创建 index.js 文件，并在文件中编写创建窗口的代码：

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

function createWindow() {
  const win = new BrowserWindow({
    width:800,
    height: 600,
    minWidth: 400,
    minHeight: 300,
    backgroundColor: "#fff",
    title: "My Awesome App",
    icon: "./assets/icon.png",
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
      devTools: process.env.NODE_ENV === "development",
    },
  })

  win.loadURL('http://localhost:3000')

  win.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()

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

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

在上述代码中，我们使用 BrowserWindow 类创建了一个窗口，并传入了一个配置对象作为参数。下面是配置对象中各个参数的说明：

• width：窗口的宽度，单位为像素。
• height：窗口的高度，单位为像素。
• minWidth：窗口的最小宽度，单位为像素。
• minHeight：窗口的最小高度，单位为像素。
• backgroundColor：窗口的背景颜色，可以使用 CSS 颜色值或十六进制颜色值。
• title：窗口的标题，可以是一个字符串。
• icon：窗口的图标，可以是一个本地文件路径或一个 Base64 编码的图像。
• webPreferences：一个对象，用于指定窗口的 WebPreferences 配置。其中，nodeIntegration 表示是否启用 Node.js 整合，默认为 false；contextIsolation 表示是否启用上下文隔离，默认为 true；enableRemoteModule 表示是否启用远程模块，默认为 false；devTools 表示是否启用开发者工具，默认为 false，可以根据开发环境动态设置。

除了上述参数之外，还有一些其他的可选参数，例如 frame（是否显示窗口边框）、transparent（是否启用透明窗口）、alwaysOnTop（窗口是否始终处于顶层）、resizable（窗口是否可调整大小）、fullscreen（窗口是否全屏显示）等等，具体可以参考官方文档。

总之，创建窗口是使用 Electron 进行桌面应用开发的基础，掌握创建窗口的参数和配置，对于后续的开发会非常有帮助。希望本篇文章能够对读者有所启发，谢谢阅读！