The company's products are developed using c ++ to write, but also are a few people, under the boss wants to engage in innovation, is to see if we can achieve the separation of the front and rear ends by other means. Then I learned that the electron this thing, before I studied Andrews saw flutter, inadvertently see the electron, but did not look carefully, you know writing tools. So recently suddenly I thought this thing can engage in a practice. So I'm going to share some of their future often learn something for everyone. Many do not say, serving.
1, first create an electron + vue project (development tools Vs Code), with open look after open vs.
2, create a js (Menu.js) file in the rendering process (menu folder you have created)
Menu.js inside the code
1 //在渲染进程中使用Menu模块需要用到remote函数 2 var Menu = require('electron').remote.Menu; 3 4 //创建一个模板 5 var template=[ 6 { 7 //父标题 8 label:'文件', 9 submenu:[ 10 { 11 //添加快捷键 12 accelerator:'ctrl+n', 13 //子标题 14 label:'新建文件', 15 //子标题类型 type String (可选)-可以是 normal、separator、submenu、checkbox 或 radio。 16 type:'checkbox', 17 //点击事件 18 click:function(){ 19 alert("ctrl"); 20 checked:true; 21 } 22 }, 23 { 24 label:'新建窗口', 25 type:'checkbox', 26 click:function(){ 27 alert("ctrl2"); 28 checked:true; 29 } 30 } 31 ] 32 }, 33 34 { 35 label:'编辑', 36 submenu:[ 37 { 38 label:'编辑文件' 39 }, 40 { 41 label:'编辑窗口' 42 } 43 ] 44 }, 45 ] 46 47 //把模板添加到Menu菜单中 48 var m = Menu.buildFromTemplate(template); 49 Menu.setApplicationMenu(m);
3、在其它窗口引入
<template> <div class="boxShadow"> </div> </template> <script type='text/javascript'> import menu from '@/components/menu/Menu' export default { name: 'boxShadow', methods: { }, data() { return { } }, } </script> <style lang="less" scoped> </style>
4、至于test.vue的路径 自己去设置啊。 运行查看效果图。
5、完成
不懂就问 QQ:3064349253