主题
创建一个 Electron 窗口
创建页面
首先需要在 src 目录下，创建一个文件夹 page-one 。
提示
这里的 page-one 不是固定的。
实际上，根据需求的不同，命名可能是 detail 、 news 等。
本文档中以 page-one 举例。
在 page-one 中包含了以下几个文件：
- pages/Page.vue
vue
<template>
Page
</template>
<script setup>
</script>
<style lang="less">
</style>- App.vue
vue
<template>
<div class="app-layout">
<router-view></router-view>
</div>
</template>
<script setup>
</script>
<style lang="less">
</style>- index.html
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Celestial Being</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="no-referrer-when-downgrade">
</head>
<body>
<div id="app"></div>
<script type="module" src="main.js"></script>
</body>
</html>- main.js
js
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'
import Home from './pages/Home.vue'
const app = createApp(App)
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
name: 'Root',
path: '/',
redirect: {
name: 'Home'
},
},
{
name: 'Page',
path: '/page',
children: [
{
name: 'PageDefault',
path: '',
redirect: {
name: 'Home'
}
},
{
name: 'Home',
path: 'home',
component: Home
}
]
}
]
})
app.use(router)
app.mount('#app')它的结构应该是这样的：
.
└─ src
└─ page-one
├─ pages
│ └─ Page.vue
├─ App.vue
├─ index.html
└─ main.js注册页面
创建完页面后，还需要在 vite.config.js 中注册页面：
警告
在未来的版本中，可能会更改为自动注册页面。
js
export default defineConfig({
build: {
rollupOptions: {
input: {
'page-one': resolve(rootPath, 'src', 'page-one', 'index.html'),
}
}
}
})创建窗口
创建完页面后，还需要创建一个窗口来展示刚刚创建的页面。
我们需要在 main/pages 目录下，创建一个 page-one 文件夹，它包含了以下这些文件：
- main.js
js
import { app } from 'electron'
import { createWindow, showWindow } from '../../core/window.js'
let window = null
app.whenReady().then(() => {
window = createWindow({
path: 'page-one',
resizable: false,
maximizable: false,
disableClickTitleBar: true,
autoShow: false
})
showWindow(window)
})- preload.js
js
import { definePrelaod } from '../../core/preload.js'
definePrelaod({
})它的结构应该是这样的：
.
└─ main
└─ pages
└─ page-one
├─ main.js
└─ preload.js🎉 恭喜，一个新的窗口已经创建完成。当你运行 npm run v:dev 和 npm run e:dev 后，它应该被自动的弹出来。
创建不自动显示的窗口
你可能会注意到，上面的例子创建的窗口会在 app 加载后立刻显示出来。但有些时候我们不希望这样，而是希望在合适的时机显示。为了达成这样的效果，我们可以将代码修改成下面这样：
- main.js
js
import { app } from 'electron'
import { createWindow, showWindow } from '../../core/window.js'
let window = null
app.whenReady().then(() => {
window = createWindow({
path: 'page-one',
resizable: false,
maximizable: false,
disableClickTitleBar: true,
autoShow: false
})
showWindow(window)
})
ipcMain.on('window/open', (event, key) => {
if (key === 'page-one') {
showWindow(window)
}
}) 在需要打开窗口的地方，我们可以使用下面的方式唤起窗口：
js
window.chronusAPI?.windowOpen('page-one')