1、主进程
background.js文件
const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:8080` : `file://${__dirname}/index.html`
//事件名 openWindow是事件名
ipcMain.on('openWindow', function () {
//调用 BrowserWindow打开新窗口
const win2 = new BrowserWindow({
width:400,
height:300,
webPreferences: {
devTools: true,
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
},
})
//test页面路由
win2.loadURL(winURL+"#/test");
win2.webContents.openDevTools();
win2.on('closed',()=>{
win2=null;
})
})
2、渲染进程
Index.vue页面
<template>
<div class="index">
<button @click="openwin">打开新窗口</button>
</div>
</template>
<script>
const { ipcRenderer } = window.require("electron");
export default {
name: "index",
components: {},
data() {
return {};
},
methods: {
openwin(){
//触发事件名
ipcRenderer.send("openWindow");
}
},
};
</script>
<style lang="scss" scoped>
</style>
Test.vue页面
<template>
<div class="test">
我是test页面
</div>
</template>
<script>
export default {
name: "test",
components: {},
data() {
return {};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
3、路由
{
path: '/test',
name: 'test',
component: () => import('@/views/Test.vue')
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具