electron-vue学习笔记(1):工具栏和标题栏的设置

Electron-Vue桌面应用初探
最新推荐文章于 2024-07-24 14:49:56 发布
原创 最新推荐文章于 2024-07-24 14:49:56 发布 · 4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#electron-vue #标题栏 #工具栏

本文介绍使用Electron-Vue构建桌面应用程序的过程，对比微软的.net平台，阐述了如何利用yarn下载依赖，展示工程目录结构及去除标题栏与菜单的方法。

使用electron-vue是为了桌面应用程序，本来首选是微软的.net，但是收费你懂得，个人研究研究eletron-vue。如有错误，请别骂我~

本人建立工程是根据：https://simulatedgreg.gitbooks.io/electron-vue/cn/getting_started.html  提供的方法建立，建立的末尾出现关于README的警告，应该没有关系。选择的yarn来下载依赖。

建立后目录如下图所示：

去除标题栏在，index.js中设置BrowserWindow的属性frame为 false，去除menu设置mainWindow.setMenu(null)

代码截图：

 

另：BrowserWindow详细说明：

https://www.electronjs.org/docs/api/browser-window

第七节 Electron顶部菜单及右键菜单
08-22 3500
今天说说顶部菜单和右键菜单，顶部菜单electron默认就有不过是英文的。右键可没有需要自己搞。我们看下默认的顶部菜单（如下图1），修改后效果如图2。以上就是今天要讲的内容，主要思路就是利用remote模块调用主进程模块。每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。
Electron与Vue结合开发桌面应用的架构设计与实践
最新发布
binbin_youyou的博客
10-08 2037
electron与vue结合开发桌面应用的架构设计，electron+vue分离架构设计
第二章 Electron自定义界面(最大化、最小化、关闭、图标等等)
Etc.End的博客
05-21 8396
自定义导航其实很简单，只需要根据自己的需求去编写相对应的导航vue页面即可。UI组件的化根据自己的需求安装，这里我以element-plus为例。为了后续能够一次性完成代码的编写，把路由也一起安装了。在src/components下新建文件夹header，接着在header文件夹下创建index.vue文件，这里面除了Electron的API调用意外，还有一个重点就是-webkit-app-region: drag;
突破编程_前端_JS编程实例（工具栏组件）
突破编程
03-14 1168
前端 JS编程实例：工具栏组件
Electron自定义导航栏
m0_63861061的博客
07-05 1356
electron默认使用系统自带的导航栏，对于有UI定制需求的产品，需要自定义开发；实现的功能包括title展示、最大化最小化、调整大小、拖拽位置等等；
【Electron】vue+electron应用设置菜单
军火库
09-15 2701
这个菜单是指的这里这里主要用到Menu的两个Api，分别是和。这里我们这样实现, 首先创建一个ElectronMenu.js文件，用于存放创建菜单。// 设置菜单栏, win表示当前窗口实例。
ruoyi-admin和ruoyi-vue3笔记-gl-wms物流管理项目
TY121810的博客
07-24 1528
gl-wms物流管理项目。
基于Electron与Vue.js的代码段管理工具开发
而 Vue Router 则可用于实现多页面或视图切换逻辑（如主页、设置页、归档页等），尽管在 Electron 应用中路由可能被简化为单页应用内的视图切换。 “代码段管理”作为本项目的功能核心，意味着系统需要支持代码的增...
基于Electron和Vue.js的书签管理桌面应用
从标题可以看出，该项目基于两大核心技术：**Electron** 和 **Vue.js**。Electron 是由 GitHub 开发的开源框架，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用程序。它本质上是将 Chromium 浏览器...
Intelliqit-notes：智能化笔记管理工具
Intelliqit-notes 是一款专注于笔记管理与知识整理的智能工具，其核心设计理念在于为用户提供高效、便捷...其设计理念融合了人机协同、数据隐私、认知科学与软件工程的最佳实践，代表了下一代智能笔记工具的发展方向。
Note-Taker：一款高效的笔记记录工具
一个优秀的笔记工具必须具备直观、美观、响应迅速的UI/UX设计，包括清晰的导航栏、侧边栏抽屉菜单、搜索框置顶、夜间模式切换、拖拽排序等功能，提升整体使用体验。可能采用了现代化的前端框架（如React、Vue.js）...
LunarCalendar:一个基于 Electron + React + Material Design 的工具栏日历，适用于 Mac、Windows 和 Linux
05-10
#LunarCalendar 基于 + + + 构建的工具栏日历应用，适用于Mac，Windows，Linux平台。 日历数据由 提供。 ====== MAC 版下载链接 ====== 开发和构建 依赖于node.js环境，请预先安装。 可直接在浏览器中打开index.html进行预览测试，但注意jQuery的引用问题。 git clone https://git.oschina.net/sinceow/LunarCalendar.git cd LunarCalendar 第一步，安装Node.js依赖和利用Bower下载前端依赖 npm install 第二步，利用Gulp构建项目并 Watch SASS 和 JS npm start 进行本地测试（可选） npm run-script electron 第三步，生成APP #生成osx状态栏日历 npm run-script
electron 自定义标题栏(windows 系统)
言小溪 的博客
02-08 8170
其实没有网上那么麻烦，如果你仅仅只是想去掉标题，还有下面的工具栏，只需要如下配置 const win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: "hidden", titleBarOverlay: { color: "#fff", symbolColor: "black", } }); 这样就会出现原生的最小化，关闭等按钮在 win 的右侧，主要这个区域
Electron 自定义菜单与手动添加菜单
lovoo的博客
03-28 2501
label: '文件' ,label: '打开' ,label: '编辑' ,label: '撤销' ,label: '重做' ,label: '剪切' ,label: '复制' ,label: '粘贴' ,label: '全选' ,label: '查看' ,label: '重载' ,// 重载之后, 刷新并关闭所有的次要窗体 if(focusedWindow.id == = 1) {label: '切换全屏' ,label: '切换开发者工具' ,
electron中自定义菜单栏
SeaBirds的博客
07-07 2191
2、默认情况下, 无边框窗口是不可拖拽的。应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的（如操作系统的标准标题栏），在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。请注意, 当前只支持矩形形状。1、设置browerWindow的autoHideMenuBar为true隐藏菜单栏。
electron 自定义标题栏_利用 electron 简单快捷地给你的工具加上美观的 GUI
weixin_35823403的博客
01-14 1655
electron + vue + element UI = excellent desktop app感觉没有效果图是不会有人往下看的，那我们先看效果好了~目的在日常工作中，经常需要开发一些小工具用于简化流程以提升开发效率这些小工具通常都比较零碎，需要一个有效的手段将他们聚合在一起，这种手段通常是GUI而GUI的开发是很繁琐的，如果投入很多时间到开发GUI上难免本末倒置。而语言原生的GUI通常都非...
Electron入门宝典（二）模块&CSP(网页安全政策)
长夜漫漫，无心睡眠
04-22 1861
一 .Electron模块介绍 分为主进程模块和渲染进程模块，有些模块既是主进程模块又是渲染进程模块。 官方api文档戳这里 二.remote模块 remote模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC) 的简便途径。 Electron中，与GUI相关的模块(如dialog, menu等)只存在于主进程，而不在渲染进程中。 为了能从渲染进程中使用它们，需要用ipc模块来给主进程发送进程间消息。使用remote模 块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似
Electron.js指南——Windows任务栏
幽灵 逐梦--专栏
10-19 3227
Windows任务栏 Electron具有用于在Windows任务栏中配置应用程序图标的API。支持的是一个创建JumpList，自定义缩略图和工具栏，图标覆盖，以及所谓的“闪框”效果，但Electron也使用app的Dock图标来实现类似的跨平台特性最近的文件和应用进展。 跳转列表 Windows允许应用程序定义自定义上下文菜单，当用户右键单击任务栏中的应用程序图标时，将显示该菜单。该上下文菜单称为JumpList。您可以在TasksJumpList类别中指定自定义操作，如MSDN所...
Electron教程（六）应用菜单设置例子
学习笔记
05-19 4021
Electron教程（6）应用菜单设置例子 官方文档说明： https://www.electronjs.org/docs/latest/api/menu 这里放一个我写的一个项目的菜单例子，用作参考 app.on('ready', ()=>{ createMainWindow() // 执行创建主窗口的一些动作 createMenu() // 创建菜单 }) // 创建 menu function createMenu() { let menuStructure = [
electron-vue多窗口插件：优化打开速度与参数传递
1. 在electron-vue项目中安装插件，通过npm或yarn添加到项目依赖。 2. 在electron主进程文件中引入插件，并按照插件文档配置窗口参数。 3. 使用提供的API或者方法创建新窗口，并通过配置选项或函数传入参数。 具体...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值