전자 + VUE 메뉴 바를 달성

  이 회사의 제품은 쓰기에 C ++를 사용하여 개발하고 있지만 상사가 우리가 다른 방법으로 전면의 분리 및 후단을 달성 할 수 있는지 확인하는 것입니다, 혁신에 참여하고 싶어 아래도 몇 사람이 있습니다. 내가 실수로 전자를 참조 앤드류스 톱 플러터을 공부하지만, 당신이 도구를 쓰는 알고 신중하게 보이지 않았다 전에 그럼, 전자 것을이 일을 배웠습니다. 그래서 최근 갑자기이 일이 연습에 참여할 수 있습니다 생각했다. 내가 공유하는거야 그래서 미래의 일부는 종종 모두를 위해 무언가를 배운다. 많은 사람들이 봉사, 말을하지 않습니다.

  1, 처음 열 대 후 열기 표정으로 전자 + VUE 프로젝트 (개발 도구 대 Code)를 생성,

    

  

2, (사용자가 만든 폴더 메뉴)는 JS (Menu.js) 렌더링 과정에서 파일을 생성

      

코드 내부 Menu.js   

 

 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

 

추천

출처www.cnblogs.com/alex96/p/12031053.html