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+vue实现菜单栏的更多相关文章
- 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)
摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...
- 手把手教Electron+vue的使用
.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Elect ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)
摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...
- Electron+Vue – 基础学习(1): 创建项目
Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Ele ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新
导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端
导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...
- electron+vue制作桌面应用--自定义标题栏
electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...
- 使用electron+vue开发一个跨平台todolist(便签)桌面应用
# 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些 ...
- Electron+Vue+ElementUI开发环境搭建
Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...
随机推荐
- SQL编程规范整理
一.排版规范 1.代码缩进 对于判断.循环等处理使用字符缩进 缩进的空格最好不要使用TAB键 2.空格及换行 变量定义.相对独立的程序块等要单独成行,便于阅读 太长的程序(超过110列)应做换行处理 ...
- Dart 库预览
容导航 dart:core - numbers, collections, strings, and more dart:async - asynchronous programming dart:m ...
- [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 ...
- 临时加一条关于bootstrap的菜单栏方面的
**有些生疏,记住了**aria-expanded表示展开状态.默认为undefined, 表示当前展开状态未知.其它可选值:true表示元素是展开的:false表示元素不是展开的. aria-hid ...
- 08_MSTP(数通华为)
1. 网络拓扑 2. SW1配置[SW1]vlan batch 10 20 30 40[SW1]stp mode mstp 进入MSTP配置视图,MSTP域名为huawei,同时配置VLAN到实例的映 ...
- css实现块级元素水平垂直居中的方法?
父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...
- 51 Nod 1135 原根
基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 设m是正整数,a是整数,若a模m的阶等于φ(m),则称a为模m的一个原根.(其中φ(m)表示m的欧拉函数) 给出1个质数P ...
- Powershell基础学习
从吐司偷来的图片,拿来当做引导吧: 0x01 简介 Windows PowerShell 是一种命令行外壳程序和脚本环境,使命令行用户和脚本编写者可以利用 .NET Framework的强大功能.当然 ...
- Pytorch中ndarray tensor list互转
1.ndarray->tensor : b=torch.from_numpy(a) 2.tensor->ndarray: b=a.numpy() ''' 但这么写会报错-- Runtime ...
- UDF——计算壁面边界合力矩(旋转机械)