公司开发的产品都是用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学习资料免费获取

electron+vue实现菜单栏的更多相关文章

  1. 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)

    摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...

  2. 手把手教Electron+vue的使用

    .现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Elect ...

  3. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

  4. Electron+Vue – 基础学习(1): 创建项目

    Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Ele ...

  5. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  6. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  7. electron+vue制作桌面应用--自定义标题栏

    electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...

  8. 使用electron+vue开发一个跨平台todolist(便签)桌面应用

    # 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些 ...

  9. Electron+Vue+ElementUI开发环境搭建

    Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...

随机推荐

  1. SQL编程规范整理

    一.排版规范 1.代码缩进 对于判断.循环等处理使用字符缩进 缩进的空格最好不要使用TAB键 2.空格及换行 变量定义.相对独立的程序块等要单独成行,便于阅读 太长的程序(超过110列)应做换行处理 ...

  2. Dart 库预览

    容导航 dart:core - numbers, collections, strings, and more dart:async - asynchronous programming dart:m ...

  3. [Algorithm] 283. Move Zeroes

    Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...

  4. 临时加一条关于bootstrap的菜单栏方面的

    **有些生疏,记住了**aria-expanded表示展开状态.默认为undefined, 表示当前展开状态未知.其它可选值:true表示元素是展开的:false表示元素不是展开的. aria-hid ...

  5. 08_MSTP(数通华为)

    1. 网络拓扑 2. SW1配置[SW1]vlan batch 10 20 30 40[SW1]stp mode mstp 进入MSTP配置视图,MSTP域名为huawei,同时配置VLAN到实例的映 ...

  6. css实现块级元素水平垂直居中的方法?

    父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...

  7. 51 Nod 1135 原根

    基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 设m是正整数,a是整数,若a模m的阶等于φ(m),则称a为模m的一个原根.(其中φ(m)表示m的欧拉函数) 给出1个质数P ...

  8. Powershell基础学习

    从吐司偷来的图片,拿来当做引导吧: 0x01 简介 Windows PowerShell 是一种命令行外壳程序和脚本环境,使命令行用户和脚本编写者可以利用 .NET Framework的强大功能.当然 ...

  9. Pytorch中ndarray tensor list互转

    1.ndarray->tensor : b=torch.from_numpy(a) 2.tensor->ndarray: b=a.numpy() ''' 但这么写会报错-- Runtime ...

  10. UDF——计算壁面边界合力矩(旋转机械)