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

最新推荐文章于 2025-05-07 13:28:55 发布
最新推荐文章于 2025-05-07 13:28:55 发布
阅读量4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： electron 文章标签： electron-vue 标题栏 工具栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hchyboy/article/details/105348546
本文介绍使用Electron-Vue构建桌面应用程序的过程，对比微软的.net平台，阐述了如何利用yarn下载依赖，展示工程目录结构及去除标题栏与菜单的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用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】vue+electron应用设置菜单
军火库
09-15 2648
这个菜单是指的这里这里主要用到Menu的两个Api，分别是和。这里我们这样实现, 首先创建一个ElectronMenu.js文件，用于存放创建菜单。// 设置菜单栏, win表示当前窗口实例。
Electron自定义导航栏
m0_63861061的博客
07-05 1206
electron默认使用系统自带的导航栏，对于有UI定制需求的产品，需要自定义开发；实现的功能包括title展示、最大化最小化、调整大小、拖拽位置等等；
使用 Electron + Vue 搭建跨平台桌面应用项目
最新发布
2501_91537388的博客
05-07 483
技术作用Vue构建 UI，单页应用架构Electron提供原生桌面运行环境Electron 主进程控制窗口、生命周期Electron 渲染进程执行 Vue 页面preload.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 7963
其实没有网上那么麻烦，如果你仅仅只是想去掉标题，还有下面的工具栏，只需要如下配置 const win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: "hidden", titleBarOverlay: { color: "#fff", symbolColor: "black", } }); 这样就会出现原生的最小化，关闭等按钮在 win 的右侧，主要这个区域
Electron 自定义菜单与手动添加菜单
lovoo的博客
03-28 2200
label: '文件' ,label: '打开' ,label: '编辑' ,label: '撤销' ,label: '重做' ,label: '剪切' ,label: '复制' ,label: '粘贴' ,label: '全选' ,label: '查看' ,label: '重载' ,// 重载之后, 刷新并关闭所有的次要窗体 if(focusedWindow.id == = 1) {label: '切换全屏' ,label: '切换开发者工具' ,
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了...
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
1. **初始化项目**：使用`electron-vue`初始化项目，设置好基本的Vue和Electron结构。 2. **配置打包**：在`package.json`中配置`electron-builder`，指定输出目录、平台、应用信息等。 3. **集成electron-updater**...
electron-vue-template:electron vue 模板
05-08
electron-vue-template 一、项目运行 1. 依赖安装 yarn install # 或者 npm install 2. 开发模式 yarn electron:serve # 或者 npm run electron:serve 3. 生产打包 yarn electron:build # 或者 npm run electron:...
electron-vue-IM:利用electron-vue开发IM，聊天功能，桌面应用
05-25
electron-vue开发IM，聊天功能，桌面应用 本项目须要electron-vue-server运行： electron-vue-test An electron-vue project Build Setup # install dependencies npm install # serve with hot reload at localhost...
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron-vue-print-demo electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作...
electron 自定义标题栏_利用 electron 简单快捷地给你的工具加上美观的 GUI
weixin_35823403的博客
01-14 1608
electron + vue + element UI = excellent desktop app感觉没有效果图是不会有人往下看的，那我们先看效果好了~目的在日常工作中，经常需要开发一些小工具用于简化流程以提升开发效率这些小工具通常都比较零碎，需要一个有效的手段将他们聚合在一起，这种手段通常是GUI而GUI的开发是很繁琐的，如果投入很多时间到开发GUI上难免本末倒置。而语言原生的GUI通常都非...
第七节 Electron顶部菜单及右键菜单
08-22 3287
今天说说顶部菜单和右键菜单，顶部菜单electron默认就有不过是英文的。右键可没有需要自己搞。我们看下默认的顶部菜单（如下图1），修改后效果如图2。以上就是今天要讲的内容，主要思路就是利用remote模块调用主进程模块。每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。
第二章 Electron自定义界面(最大化、最小化、关闭、图标等等)
Etc.End的博客
05-21 8212
自定义导航其实很简单，只需要根据自己的需求去编写相对应的导航vue页面即可。UI组件的化根据自己的需求安装，这里我以element-plus为例。为了后续能够一次性完成代码的编写，把路由也一起安装了。在src/components下新建文件夹header，接着在header文件夹下创建index.vue文件，这里面除了Electron的API调用意外，还有一个重点就是-webkit-app-region: drag;
突破编程_前端_JS编程实例（工具栏组件）
突破编程
03-14 1088
前端 JS编程实例：工具栏组件
Electron.js指南——Windows任务栏
幽灵 逐梦--专栏
10-19 2997
Windows任务栏 Electron具有用于在Windows任务栏中配置应用程序图标的API。支持的是一个创建JumpList，自定义缩略图和工具栏，图标覆盖，以及所谓的“闪框”效果，但Electron也使用app的Dock图标来实现类似的跨平台特性最近的文件和应用进展。 跳转列表 Windows允许应用程序定义自定义上下文菜单，当用户右键单击任务栏中的应用程序图标时，将显示该菜单。该上下文菜单称为JumpList。您可以在TasksJumpList类别中指定自定义操作，如MSDN所...
electron 菜单栏_如何在Electron JS中添加任务栏图标菜单？
cumudi0723的博客
07-16 2866
electron 菜单栏If you are new here, please consider checking out my recent articles on Electron JS including Tray Icons. 如果您是新来的，请考虑查看我最近关于Electron JS的文章， 包括托盘图标 。 In this tutorial, we will set up 2 me...
自定义Electron标题栏 - 打造个性化的应用界面
gitblog_00086的博客
05-17 841
自定义Electron标题栏 - 打造个性化的应用界面 项目地址:https://gitcode.com/gh_mirrors/cu/custom-electron-titlebar 自定义Electron标题栏 是一个由TypeScript编写的库，专为Electron应用程序设计，提供完全可定制的标题栏解决方案。它的目标是让开发者能够轻松地打造出符合自己应用风格的标题栏，从而提升用户体验。 项...
Electron中的自定义菜单栏
XwyMysql的博客
09-18 986
请注意，在macOS上，Electron应用程序的菜单栏通常位于操作系统的菜单栏上方，并且默认情况下，macOS会自动为Electron应用程序生成一个菜单栏，其中包含了一些默认的菜单项。首先，我们需要在Electron应用程序的主进程中创建一个菜单栏。在上述代码中，我们创建了一个简单的菜单栏，包含了“文件”、“编辑”和“帮助”三个主菜单项。例如，“文件”菜单项有“打开”、“保存”和“退出”三个子菜单项。通过自定义菜单栏，开发者可以为应用程序添加各种功能和操作，提高用户体验和应用程序的易用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值