vue 创建一个新的electron窗口
时间: 2023-09-20 19:03:29 浏览: 54
在 Vue 中创建一个新的 Electron 窗口,可以按照以下步骤进行:
1. 安装 electron:
```
npm install electron --save-dev
```
2. 在 `package.json` 文件中添加以下脚本:
```
"electron": "electron ."
```
3. 创建一个新的组件来作为 Electron 窗口的内容,例如 `MyApp.vue`:
```html
<template>
<div>
<h1>Hello, Electron!</h1>
</div>
</template>
```
4. 在 `main.js` 中创建一个新的 Electron 窗口:
```js
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
devTools: true
}
});
mainWindow.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`);
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
```
其中,`main.js` 是 Electron 的主进程,创建了一个 `BrowserWindow` 来显示 Vue 组件的内容。
5. 在 `App.vue` 中添加按钮来触发打开新窗口的事件:
```html
<template>
<div>
<h1>Hello, Vue!</h1>
<button @click="openWindow">Open Electron Window</button>
</div>
</template>
<script>
export default {
methods: {
openWindow() {
const { remote } = require('electron');
const win = new remote.BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
devTools: true
}
});
win.loadURL(`file://${__dirname}/index.html#/myapp`);
}
}
};
</script>
```
在 `openWindow` 方法中,使用 `remote` 模块来创建一个新的 Electron 窗口,并加载 Vue 组件的 URL。
最后,将 `MyApp.vue` 添加到路由中,就可以在打开的 Electron 窗口中看到该组件的内容了。