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学习资料免费获取