Electron-Vue开发笔记（3）：打造多窗口多页面架构

2023-10-10 00:08:55

Electron-Vue简介

Electron-Vue是一个将Vue.js集成到Electron中的框架，它允许开发者使用Vue.js构建跨平台的桌面应用程序。Electron-Vue结合了Electron的强大功能和Vue.js的开发便利性，使开发者能够快速构建出高性能、跨平台的桌面应用程序。

多窗口多页面配置

在Electron-Vue中，您可以轻松地配置多窗口多页面的应用程序。要实现这一点，我们需要在main.js文件中进行一些配置。

导入必要的模块

首先，我们需要导入必要的模块，包括electron、vue和vue-router。

const { app, BrowserWindow, Menu, Tray, nativeImage, dialog } = require('electron')
const path = require('path')
const url = require('url')
const Vue = require('vue')
const VueRouter = require('vue-router')

创建Vue实例

接下来，我们需要创建一个Vue实例。

const vueInstance = new Vue({
  router,
  render: h => h(App)
})

配置Electron窗口

在Vue实例创建好之后，我们需要配置Electron窗口。

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true
  }
})

mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, 'index.html'),
  protocol: 'file:',
  slashes: true
}))

mainWindow.on('closed', () => {
  app.quit()
})

创建其他窗口

如果我们需要创建其他窗口，我们可以使用BrowserWindow.create()方法。

const childWindow = new BrowserWindow({
  width: 400,
  height: 300,
  parent: mainWindow,
  modal: true
})

childWindow.loadURL(url.format({
  pathname: path.join(__dirname, 'child.html'),
  protocol: 'file:',
  slashes: true
}))

childWindow.on('closed', () => {
  childWindow = null
})

配置路由

为了在不同的窗口中加载不同的页面，我们需要配置路由。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})