本节为大家介绍如何为我们的应用定制一个菜单，让它看起来更像一个原生的桌面端APP。
1、载入菜单模块
在 renderer 的 /public/index.html 里载入菜单模块：
<script>
const { remote, shell } = require('electron')
</script>
2、定制菜单
修改 /src/App.vue，在 mounted 里定制菜单：
<script>
// ...
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)
}
}
</script>
