本節為大家介紹如何為我們的應用定製一個菜單，讓它看起來更像一個原生的桌面端APP。
1、載入菜單模塊
在 renderer 的 /public/index.html 裡載入菜單模塊：
const { remote, shell } = require('electron')
2、定製菜單
修改 /src/App.vue，在 mounted 裡定製菜單：
// ...
export default {
// ...
mounted() {
// Menu template
const template = [
{
label: 'Items',
submenu: [
{
label: 'Add New',
click: () => {
this.setModalVisible(true)
},
accelerator: 'CmdOrCtrl+O'
}
]
},
{
role: 'editMenu'
},
{
role: 'windowMenu'
},
{
role: 'help',
submenu: [
{
label: 'Learn more',
click: () => { shell.openExternal('https://github.com/stackacademytv/master-electron') }
}
]
}
]
// Set Mac-specific first menu item
if (process.platform === 'darwin') {
template.unshift({
label: remote.app.getName(),
submenu: [
{ role: 'about' },
{ type: 'separator'},
{ role: 'services' },
{ type: 'separator'},
{ role: 'hide' },
{ role: 'hideothers' },
{ role: 'unhide' },
{ type: 'separator'},
{ role: 'quit' }
]
})
}
// Build menu
const menu = remote.Menu.buildFromTemplate(template)
// Set as main app menu
remote.Menu.setApplicationMenu(menu)
}
}