electron+vue實現菜單欄

　　公司開發的產品都是用c++寫的，而且還都是幾個人，老板想搞下創新，就是看看能否通過其它的方式來實現前后端分離。然后我就了解到了electron這個東西，之前學安卓的時候看到過flutter，不經意間看到了electron，但是沒有仔細看，就知道是寫工具的。所以最近突然想起來這個東西可以搞一搞。所以我打算以后經常分享一些自己學到的東西給大家。多的不說，上菜。

　　1、首先創建一個electron+vue的項目（開發工具 Vs Code）,用vs打開打開之后的樣子。

　　　　

　　

2、在渲染進程中創建一個js（Menu.js）文件（menu文件夾自己創建的）

　　　　　　

Menu.js里面的代碼   

 

 

//在渲染進程中使用Menu模塊需要用到remote函數
var Menu = require('electron').remote.Menu;

//創建一個模板
var template=[
    {   
        //父標題
        label:'文件',
        submenu:[
            {   
                //添加快捷鍵
                accelerator:'ctrl+n',
                //子標題
                label:'新建文件',
                //子標題類型 type String (可選)-可以是 normal、separator、submenu、checkbox 或 radio。
                type:'checkbox',
                //點擊事件
                click:function(){
                  alert("ctrl");
                  checked:true;
                }
            },
            {
                label:'新建窗口',
                type:'checkbox',
                click:function(){
                  alert("ctrl2");
                  checked:true;
                }
            }
        ]
    },

    {
        label:'編輯',
        submenu:[
            {
                label:'編輯文件'
            },
            {
                label:'編輯窗口'
            }
        ]
    },
]

//把模板添加到Menu菜單中
var m = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);         

3、引用

<template>
  <div id="test">
  
  </div>
  
</template>

<script>
    import menujs from '@/components/menu/Menu'

</script>
<style>
</style>

 

4、  運行查看效果圖。

 

 5、完成

 

electron學習資料免費獲取