electron+vite+vue实现自定义菜单栏

要实现自定义菜单栏，可以使用 Electron 提供的 Menu 模块。以下是一个使用 Electron Vite Vue 实现自定义菜单栏的步骤：

1. 在 Vue 组件中引入 Electron 的 remote 模块，用于获取主进程的 Menu 对象。

import { remote } from 'electron'
const Menu = remote.Menu

2. 在 Vue 组件的生命周期钩子函数中创建菜单项，可以使用 Menu.buildFromTemplate 方法创建菜单项的数组。

created() {
  const template = [
    {
      label: '文件',
      submenu: [
        { label: '新建', accelerator: 'CmdOrCtrl+N', click: this.handleNew },
        { label: '打开', accelerator: 'CmdOrCtrl+O', click: this.handleOpen },
        { type: 'separator' },
        { label: '保存', accelerator: 'CmdOrCtrl+S', click: this.handleSave },
        { label: '另存为', accelerator: 'Shift+CmdOrCtrl+S', click: this.handleSaveAs },
        { type: 'separator' },
        { label: '退出', accelerator: 'CmdOrCtrl+Q', click: this.handleQuit }
      ]
    },
    {
      label: '编辑',
      submenu: [
        { label: '撤销', accelerator: 'CmdOrCtrl+Z', role: 'undo' },
        { label: '重做', accelerator: 'Shift+CmdOrCtrl+Z', role: 'redo' },
        { type: 'separator' },
        { label: '剪切', accelerator: 'CmdOrCtrl+X', role: 'cut' },
        { label: '复制', accelerator: 'CmdOrCtrl+C', role: 'copy' },
        { label: '粘贴', accelerator: 'CmdOrCtrl+V', role: 'paste' },
        { label: '全选', accelerator: 'CmdOrCtrl+A', role: 'selectAll' }
      ]
    }
  ]
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

3. 在 Vue 组件中实现菜单项的点击事件。

methods: {
  handleNew() {
    // 新建文件
  },
  handleOpen() {
    // 打开文件
  },
  handleSave() {
    // 保存文件
  },
  handleSaveAs() {
    // 另存为文件
  },
  handleQuit() {
    // 退出应用程序
  }
}

这样就可以在 Electron Vite Vue 应用程序中实现自定义菜单栏了。需要注意的是，菜单项的点击事件可以调用主进程中的方法，例如使用 ipcRenderer 发送消息给主进程，让主进程执行相应的操作。