electron + vue3 实现window唯一标识 win11

在Electron环境中，结合Vue3来创建一个窗口并获取其唯一的标识符（通常称为`winId`），你可以通过以下步骤完成：

1. **安装依赖**：
首先，你需要安装Vue CLI构建工具和 Electron 的 Vue 插件，可以使用 `vue-cli-plugin-electron-builder`。运行：

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

2. **配置Vue项目**：
创建一个新的Vue项目，然后添加插件支持：

   vue create my-electron-vue
   cd my-electron-vue
   vue add electron-builder

3. **主进程**（main.js）设置：
在主进程中，你需要初始化 Vue 应用，并监听新窗口打开事件。例如，在`src/main.js`中：

   import { app } from 'electron'
   const { createWindow } = require('electron')
   const myApp = new Vue({
     // ...你的Vue应用配置...
   })

   app.on('ready', async () => {
     let mainWindow = await createWindow({ // 创建窗口
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true, // 如果需要Node.js API
       }
     })
     myApp.$mount(mainWindow) // 将Vue应用挂载到窗口上

     mainWindow.webContents.id // 这里就是当前窗口的唯一标识符
   })

4. **获取唯一标识**：
当你想要获取某个特定窗口的标识符时，可以在相应的组件生命周期钩子（如`beforeMount`或`mounted`）中读取`webContents.id`。

5. **注意事项**：
- 确保在每个窗口加载完成后正确地挂载Vue实例，以便能够获取到正确的窗口标识。
- 如果你的应用程序有多个窗口，每个窗口都会有各自的`winId`。