vue electron打开子窗口

在Vue.js应用中结合Electron框架，如果你想在主窗口内打开一个新的子窗口（也称为Webview），你可以使用`vue-electron`库提供的`shell`模块。首先，你需要安装这个依赖：

npm install vue-electron shell

然后，在你的Vue组件中，可以创建一个点击事件来打开新的子窗口：

<template>
  <button @click="openChildWindow">打开子窗口</button>
</template>

<script>
import { shell } from 'electron'

export default {
  methods: {
    openChildWindow() {
      const url = 'https://example.com'; // 替换为你想加载的实际URL
      shell.openExternal(url); // 使用shell.openExternal打开新窗口
    }
  }
}
</script>

在这个例子中，当你点击“打开子窗口”按钮，会打开一个指向指定URL的新浏览器窗口。

相关问题

electron VUE 子窗口

为了在electron-vue应用程序中打开一个新的子窗口并渲染自己开发的vue组件页面，可以按照以下步骤进行操作：

1.在主进程中创建一个新的BrowserWindow实例，该实例将作为子窗口打开。

// main.js
const { BrowserWindow } = require('electron')

let childWindow

function createChildWindow() {
 childWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
  })

  childWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/#/child')
  childWindow.on('closed', () => {
    childWindow = null
  })
}

2.在vue组件中使用vue-router进行页面跳转，以便在子窗口中渲染自己的组件页面。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Child from '@/components/Child'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/child',
      name: 'Child',
      component: Child,
    },
  ],
})

3.在渲染进程中使用contextBridge将openWindow方法暴露给vue组件，以便在vue组件中调用该方法打开子窗口。

// renderer.js
const { contextBridge, ipcRenderer } = require('electron')

const openWindow = (param) => {
  ipcRenderer.invoke('on-open-event', param)
}

contextBridge.exposeInMainWorld('myApi', { openWindow })

4.在vue组件中调用openWindow方法打开子窗口。

// Child.vue
<template>
  <div class="child">
    <h1>This is a child window</h1>
    <button @click="openChildWindow">Open Child Window</button>
  </div>
</template>

<script>
export default {
  methods: {
    openChildWindow() {
      window.myApi.openWindow()
    },
  },
}
</script>

我怎么在electron-vite通过点击按钮创建子窗口，子窗口就是一个vue页面呢

在 Electron 和 Vite 的应用中，你可以使用 `webview` 或者直接引入 Vue 组件的方式来创建子窗口并显示 Vue 页面。这里是一个简单的步骤说明：

1. **安装依赖**:
首先确保你在项目中已经安装了 `electron` 和 `vue-electron` 等必要的库。如果你还没有，可以这样安装：

   npm install electron vue electron-vue @vue/cli-plugin-electron

2. **设置主进程**:
在 Electron 主进程中，你可以创建一个新的 `BrowserWindow` 对象来代表子窗口，并加载你的 Vue 应用。例如，在 `main.js` 中添加如下代码：

   const { BrowserWindow } = require('electron')
   
   function createChildWindow() {
     const win = new BrowserWindow({ width: 800, height: 600 })
     win.loadFile('dist/index.html') // 'dist'是你构建Vue应用后的文件路径
     win.webContents.openDevTools()
   }

   // 当你想要打开子窗口时，调用createChildWindow函数
   createChildWindow()

3. **在 Vue 页面中准备**:
在你的 Vue 页面 (比如 `src/App.vue`) 里，你可以打包成一个完整的 HTML 文件，这通常是构建时自动完成的。如果使用 Vue CLI，确保运行过 `npm run build`。

4. **点击事件触发**:
在你的 Vue 控制层或组件里，绑定一个点击事件到按钮上，当点击时调用 `electron` 的 API 来创建子窗口。例如，在模板 (`template` 标签内) 添加一个按钮，并绑定 click 事件：

   <button @click="openChildWindow">打开子窗口</button>

然后在相应的 JavaScript 部分（如 `methods` 片段）中定义 `openChildWindow` 函数，模仿上面 `main.js` 中的 `createChildWindow` 逻辑。

5. **运行应用**:
运行 `npm run serve` 开启开发服务器，然后通过主进程调用 `createChildWindow` 来预览效果。