【前端记事】关于electron的入门使用
electron入门使用
- 背景
- how to start
- 第一步 创建一个vite-vue3项目
- 第二步 装各种依赖
- 第三步 配置
- vite.config.js
- package.json
- electron入口
- 启动
- 重写关闭、隐藏、最大化最小化
背景
最近对electron比较感兴趣,折腾一段时间后有了点眉目,记录一下
how to start
第一步 创建一个vite-vue3项目
# 选vue3但是不要用ts,用js会舒服得多
npm create vite -n test-electron
第二步 装各种依赖
# 命令1
npm i electron -d -s
# 命令2
npm install vite-plugin-optimizer --save-dev
# 命令3
npm install vite-plugin-node-polyfills --save-dev
# 命令4
npm install @electron/remote
# 命令5
npm install element-plus --save
# 命令6
npm i vue-router
注意,命令1可能需要反复执行反复失败才会成功,推测是网的原因,而且我自己测试用yarn和pnpm必报错,只有npm才行
第三步 配置
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import optimizer from 'vite-plugin-optimizer'// https://vite.dev/config/
export default defineConfig({plugins: [vue(), // 添加 Node.js 内置模块的 polyfillnodePolyfills({include: ['path'],globals: { Buffer: true, global: true, process: true },protocolImports: true,}),optimizer({electron: `const { ipcRenderer } = require('electron'); export { ipcRenderer };`})],build: {rollupOptions: {output: {manualChunks: {// 将第三方库分割到单独的代码块'vendor': ['element-plus'],}}}},server: {port: 8888,cors: true, // 允许跨域hmr: true, // 开启热更新},"base": "./"
})
package.json
{"name": "ele-pro","private": true,"version": "0.0.0","type": "module","main": "electron/main.cjs","scripts": {"dev": "vite","build": "vite build","preview": "vite preview","electron:serve": "vite build && electron ."},"dependencies": {"@electron/remote": "^2.1.2","electron-reload": "^2.0.0-alpha.1","element-plus": "^2.9.7","vue": "^3.5.13","vue-router": "^4.5.0"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","electron": "^35.1.3","vite": "^6.2.0","vite-plugin-node-polyfills": "^0.23.0","vite-plugin-optimizer": "^1.4.3"}
}
一定要重点关注入口:“main”: “electron/main.cjs”,和electron启动命令:“electron:serve”: “vite build && electron .”
electron入口
在项目的根目录下新建文件夹/electron。
在文件夹中新建文件main.cjs
注意,一定要是.cjs,不是.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
require('@electron/remote/main').initialize()function createWindow() {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 1200,height: 800,frame: false, // 隐藏默认的标题栏webPreferences: {// 书写渲染进程中的配置nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的APIcontextIsolation: false, // 可以使用require方法},})require('@electron/remote/main').enable(mainWindow.webContents)let env = 'pro'// 配置热更新if (env == 'pro') {const elePath = path.join(__dirname, '../node_modules/electron')require('electron-reload')('../', {electron: require(elePath),})// 热更新监听窗口mainWindow.loadURL('http://localhost:8888')// 打开开发工具mainWindow.webContents.openDevTools()} else {// 生产环境中要加载文件,打包的版本// Menu.setApplicationMenu(null)// 加载 index.htmlmainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增}
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {// 关闭默认菜单栏Menu.setApplicationMenu(null)createWindow()app.on('activate', function () {// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他// 打开的窗口,那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})
启动
打开两个终端窗口,需要都在该项目的根目录。
先运行npm run dev
再运行npm run electron:serve
这样,electron就能根据vue的内容实时渲染
重写关闭、隐藏、最大化最小化
在vue的根组件App.vue中:
<script setup>
import {Close,FullScreen,ArrowDown
} from '@element-plus/icons-vue'
import { getCurrentWindow } from '@electron/remote'
// 关闭
const closeApp = () => {const currentWindow = getCurrentWindow()currentWindow.close()
}
// 全屏/退出全屏应用
const fullScreenApp = () => {const currentWindow = getCurrentWindow()if (currentWindow.isFullScreen()) {currentWindow.setFullScreen(false)} else {currentWindow.setFullScreen(true)}
}// 最小化应用
const hideApp = () => {const currentWindow = getCurrentWindow()currentWindow.minimize()
}
</script><template><div><div style="padding: 10pt; text-align: right;"><el-button type="warning" size="small" circle :icon="ArrowDown" @click="hideApp"></el-button><el-button type="success" size="small" :icon="FullScreen" circle @click="fullScreenApp" /><el-button type="danger" size="small" :icon="Close" circle @click="closeApp" /></div><router-view></router-view></div>
</template><style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;color: #2c3e50;
}
</style>
先到这里,后面有什么好玩的继续更新
相关文章:
【前端记事】关于electron的入门使用
electron入门使用 背景how to start第一步 创建一个vite-vue3项目第二步 装各种依赖第三步 配置vite.config.jspackage.jsonelectron入口 启动重写关闭、隐藏、最大化最小化 背景 最近对electron比较感兴趣,折腾一段时间后有了点眉目,记录一下 how to …...
Qt绘制可选择范围的日历
【日历控件设计】 #include <QApplication> #include <QWidget> #include <QVBoxLayout> #include <QCalendarWidget> #include <QHBoxLayout> #include <QSpinBox> #include <QPushButton> #include <QLabel> #include <Q…...
Pycharm(十五)面向对象程序设计基础
目录 一、定义类及使用类的成员 二、self关键字介绍 三、在类内部调用类中的函数 class 类名: 属性(类似于定义变量) 行为(类似于定义函数,只不过第一个形参要写self) 一、面向对象基本概述 属性&…...
【C++游戏引擎开发】第21篇:基于物理渲染(PBR)——统计学解构材质与光影
引言 宏观现象:人眼观察到的材质表面特性(如金属的高光锐利、石膏的漫反射柔和),本质上是微观结构对光线的统计平均结果。 微观真相:任何看似平整的表面在放大后都呈现崎岖的微观几何。每个微表面(Microfacet)均为完美镜面,但大量微表面以不同朝向分布时,宏观上会表…...
flutter_slidable 插件使用
简介 flutter_slidable 是一个用于创建可滑动列表项的 Flutter 插件,它允许用户通过滑动来显示隐藏的操作按钮,比如删除、分享等功能。 安装 在 pubspec.yaml 中添加依赖(并运行 flutter pub get): dependencies:fl…...
[论文阅读]ConfusedPilot: Confused Deputy Risks in RAG-based LLMs
ConfusedPilot: Confused Deputy Risks in RAG-based LLMs [2408.04870] ConfusedPilot: Confused Deputy Risks in RAG-based LLMs DEFCON AI Village 2024 文章是针对Copilot这样一个RAG服务提供平台的攻击 在企业环境中整合人工智能工具(如 RAG)会…...
诠视科技MR眼镜如何使用头瞄点和UGUI交互
诠视科技MR眼镜如何使用头瞄点和UGUI交互 要实现头瞄点计算单元确认键操作UGUI,最快捷的方式,右键直接添加XvHeadGazeInputController。 添加以后会自动生成XvHeadGazeInputController到Head节点下面去。 重要的几个参数讲解: scaleFactor:…...
数据赋能(204)——原则与原理——原理方法
原理更多地关注事物本身的客观规律,而原则侧重于指导人们的行为和决策。原则与原理是两个常常被提及,但有所区别的概念。原则和原理在各个领域中都发挥着重要的作用。 原理概念 原理,则通常指的是自然科学和社会科学中具有普遍意义的基本规…...
代码随想录算法训练营第五十六天 | 108.冗余连接 109.冗余连接II
108.冗余连接 题目链接:108. 冗余的边 文章讲解:代码随想录 思路: 题目说是无向图,返回一条可以删去的边,使得结果图是一个有着N个节点的树,如果有多个答案,则返回二维数组中最后出现的边。 …...
Git入门
一、Git 基础概念 1. 版本控制系统分类 本地版本控制:如RCS,仅在本机保存历史版本集中式版本控制:如SVN,单一中央服务器管理代码分布式版本控制:如Git,每个开发者都有完整的仓库副本 2. Git 核心概念 概…...
5G + 物联网:智能世界的催化剂,如何用Python打造下一代IoT应用?
5G 物联网:智能世界的催化剂,如何用Python打造下一代IoT应用? 在数字化时代,物联网(IoT) 已成为智能产业的关键技术。从智能家居到智慧城市,再到工业4.0,我们的世界正在变得越来越…...
从单点突破到链式攻击:XSS 的渗透全路径解析
在网络安全领域,跨站脚本攻击(Cross-Site Scripting,简称 XSS)早已不是新鲜话题。然而,随着网络技术的迭代与应用场景的复杂化,攻击者不再满足于单一的 XSS 漏洞利用,而是将 XSS 与其他安全漏洞…...
spark和hadoop的对比和联系
一、Apache Hadoop 简介 Hadoop是一个由Apache基金会开发的开源分布式计算平台。它主要由Hadoop分布式文件系统(HDFS)和MapReduce计算框架组成。HDFS是为大规模数据存储而设计的,它将文件分割成多个数据块(block)&…...
【Vue3 / TypeScript】 项目兼容低版本浏览器的全面指南
在当今前端开发领域,Vue3 和 TypeScript 已成为主流技术栈。然而,随着 JavaScript 语言的快速演进,许多现代特性在低版本浏览器中无法运行。本文将详细介绍如何使 Vue3 TypeScript 项目完美兼容 IE11 等低版本浏览器。 一、理解兼容性挑战 …...
从零开始搭建你的个人博客:使用 GitHub Pages 免费部署静态网站
🌐 从零开始搭建你的个人博客:使用 GitHub Pages 免费部署静态网站 在互联网时代,拥有一个属于自己的网站不仅是一种展示方式,更是一种技术能力的体现。今天我们将一步步学习如何通过 GitHub Pages 搭建一个免费的个人博客或简历…...
java 设计模式 原型模式
简介 原型模式(Prototype Pattern) 是一种创建型设计模式,它通过复制现有对象来生成新对象,而不是通过 new 关键字创建。核心思想是减少对象创建的开销,尤其是当对象初始化过程复杂或代价较高时。 原型模式的核心实现…...
分别配置Github,Gitee的SSH链接
文章目录 前言一、为第二个账号生成新的密钥对二、 配置 SSH config 文件1.引入库使用 Host 别名进行 clone/push/pull注意扩展 前言 之前已经在电脑配置过Github一个仓库ssh链接,今天想配一个Gitee仓库的ssh链接。运行 ssh-keygen -t rsa提示已经存在,…...
从零开始搭建Django博客②--Django的服务器内容搭建
本文主要在Ubuntu环境上搭建,为便于研究理解,采用SSH连接在虚拟机里的ubuntu-24.04.2-desktop系统搭建,当涉及一些文件操作部分便于通过桌面化进行理解,通过Nginx代理绑定域名,对外发布。 此为从零开始搭建Django博客…...
如何用python脚本读取本地excel表格Workbook.xlsx将里面B2:B8内容,发给本地ollama大模型改写内容后写入对应C2:C8?
环境: python3.10 Win10专业版 ollama 火山引擎 影刀 问题描述: 如何用python脚本读取本地excel表格Workbook.xlsx将里面B2:B8内容,发给本地ollama大模型改写内容后写入对应C2:C8? 解决方案: 1.制作一个python脚本如下: import openpyxl import requests import…...
webpack详细打包配置,包含性能优化、资源处理...
以下是一个详细的 Webpack 5 配置示例,包含常见资源处理和性能优化方案: const path require(path); const webpack require(webpack); const { BundleAnalyzerPlugin } require(webpack-bundle-analyzer); const TerserPlugin require(terser-webp…...
MYSQL的binlog
用于备份恢复和主从复制 binlog 有 3 种格式类型,分别是 STATEMENT(默认格式)、ROW、 MIXED: STATEMENT:每一条修改数据的 SQL 都会被记录到 binlog 中(相当于记录了逻辑操作,所以针对这种格式…...
Saliency Driven Perceptual Image Compression阅读
2021 WACV 创新点 常用的评估指标如MS-SSIM和PSNR不足以判断压缩技术的性能,它们与人类对相似性的感知不一致(2和3的MS-SSIM更高,但文字反而没那么清晰)。 考虑显著区域的压缩(a)将更多的比特分配给显著区域(b&#…...
【C++ 类和数据抽象】构造函数
目录 一、构造函数的基本概念 1.1 构造函数核心特性 1.2 构造函数的作用 1.3 构造函数类型体系 二、构造函数的类型 2.1 默认构造函数 2.2 带参数的构造函数 2.3 拷贝构造函数 2.4 移动构造函数(C11 及以后) 三、初始化关键技术 3.1 成员初始…...
kotlin的kmp编程中遇到Unresolved reference ‘java‘问题
解决办法 打开 File → Project Structure → Project 确保 Project SDK 是 与你的 jvmToolchain 保持一致 如果没有,点击右上角 Add SDK 添加 JDK 路径 同步Sync 然后就正常了。 package org.example.projectimport androidx.compose.animation.AnimatedVi…...
鸿蒙Flutter仓库停止更新?
停止更新 熟悉 Flutter 鸿蒙开发的小伙伴应该知道,Flutter 3.7.12 鸿蒙化 SDK 已经在开源鸿蒙社区发布快一年了, Flutter 3.22.x 的鸿蒙化适配一直由鸿蒙突击队仓库提供,最近有小伙伴反馈已经 2 个多月没有停止更新了,不少人以为停…...
【Ultralytics 使用yolo12 读取tiff 数据异常解决】
Ultralytics 使用yolo12 读取tiff 数据解决 Ultralytics 使用yolo12 读取tiff 数据异常解决 Ultralytics 使用yolo12 读取tiff 数据异常解决 Lib\site-packages\ultralytics\utils\patches.py def imread(filename: str, flags: int cv2.IMREAD_COLOR):"""Read…...
画布交互系统深度优化:从动态缩放、小地图到拖拽同步的全链路实现方案
画布交互系统深度优化:从动态缩放、小地图到拖拽同步的全链路实现方案 在可视化画布系统开发中,高效的交互体验与稳定的性能表现是核心挑战。本文针对复杂场景下的五大核心需求,提供完整的技术实现方案,涵盖鼠标中心缩放、节点尺寸…...
GTS-400 系列运动控制器板(七)----修改限位开关触发电平
运动控制器函数库的使用 运动控制器驱动程序、dll 文件、例程、Demo 等相关文件请通过固高科技官网下载,网 址为:www.googoltech.com.cn/pro_view-3.html 1 Windows 系统下动态链接库的使用 在 Windows 系统下使用运动控制器,首先要安装驱动程序。在安装前需要提前下载…...
学习前端(前端技术更新较快,需持续关注技术更新)
目录 1. 基础三件套 1.1 HTML 1.2 CSS 1.3 JavaScript 2. 前端框架 2.1 React 2.2 Vue 2.3 Angular 3. 工程化工具 3.1 构建工具 3.2 代码质量 4. 网络和安全 4.1 HTTP/HTTPS 4.2 性能优化 5. 前沿技术 5.1 TypeScript 5.2 WebAssembly 5.3 微前端 5.4 可视…...
视频转换为MP4格式,小白工具批量转换,在线操作,简单快捷,超实用
小白工具https://www.xiaobaitool.net/videos/convert-to-mp4/ 是一款适合在线将视频转换为MP4格式的工具,尤其适合希望快速转换且无需下载安装软件的用户。以下是对该工具的详细推荐及使用建议: 一、工具特点 在线操作,无需下载 用户只需通…...
PDF处理控件Aspose.PDF指南:使用 Python 将 EPUB 转换为 PDF
EPUB是一种流行的电子书格式,用于可重排内容,而PDF则广泛用于固定版式文档,非常适合共享和打印。如果您想使用 Python 将 EPUB 转换为 PDF,Aspose.PDF for Python 提供了一个简单可靠的解决方案。在本教程中,我们将向您…...
超级扩音器手机版:随时随地,大声说话
在日常生活中,我们常常会遇到手机音量太小的问题,尤其是在嘈杂的环境中,如KTV、派对或户外活动时,手机自带的音量往往难以满足需求。今天,我们要介绍的 超级扩音器手机版,就是这样一款由上海聚告德业文化发…...
Jenkins的地位和作用
所处位置 Jenkins 是一款开源的自动化服务器,广泛应用于软件开发和测试流程中,主要用于实现持续集成(CI)和持续部署(CD)。它在开发和测试中的位置和作用可以从以下几个方面来理解: 1. 在开发和测…...
NumPy进阶:广播机制、高级索引与通用函数详解
目录 一、广播机制:不同形状数组间的运算 1. 概念 2. 广播规则 3. 实例 二、高级索引:布尔索引与花式索引 1. 布尔索引 (1)创建布尔索引 (2)布尔索引的应用 2. 花式索引 (1࿰…...
Trino分布式 SQL 查询引擎
Trino(以前称为 PrestoSQL)是一个开源的分布式 SQL 查询引擎,专为交互式分析查询设计,可对大规模数据集进行快速查询。以下从多个方面详细介绍 Trino: 主要特点 多数据源支持:Trino 能够连接多种不同类型…...
Oracle DBA 高效运维指南:高频实用 SQL 大全
大家好,这里是 DBA学习之路,专注于提升数据库运维效率。 目录 前言Top SQL表空间使用率RMAN 备份DataGuard等待事件行级锁在线日志切换用户信息ASM 磁盘组DBLink数据文件收缩AWR 写在最后 前言 作为一名 Oracle DBA,在日常数据库运维工作中&…...
SpringBoot原生实现分布式MapReduce计算
一、架构设计调整 核心组件替换方案: 1、注册中心 → 数据库注册表 2、任务队列 → 数据库任务表 3、分布式锁 → 数据库行级锁 4、节点通信 → HTTP REST接口 二、数据库表结构设计 节点注册表 CREATETABLE compute_nodes (node_id VARCHAR(36)PRIMARYKEY,last_…...
可吸收聚合物:医疗科技与绿色未来的交汇点
可吸收聚合物(Biodegradable Polymers)作为生物医学工程的核心材料,正引领一场从“金属/塑料植入物”到“智能降解材料”的范式转移。根据QYResearch(恒州博智)预测,2031年全球可吸收聚合物市场销售额将突破…...
Java从入门到“放弃”(精通)之旅——抽象类和接口⑨
Java从入门到“放弃”(精通)之旅🚀——抽象类和接口⑨ 引言 在Java面向对象编程中,抽象类和接口是两个非常重要的概念。它们为代码提供了更高层次的抽象能力,是设计灵活、可扩展系统的关键工具。 🟦一、抽…...
游戏引擎学习第239天:通过 OpenGL 渲染游戏
回顾并为今天的内容做准备 今天,我想继续完成这部分内容,因为实际上我们已经完成了大部分工作,剩下的部分并不复杂。我计划今天完成这部分实现,至少是那些不涉及纹理的部分。正如昨天所说,纹理部分才是唯一比较复杂的…...
基于Python的多光谱遥感数据处理与分类技术实践—以农作物分类与NDVI评估为例
多光谱遥感数据包含可见光至红外波段的光谱信息,Python凭借其丰富的科学计算库(如rasterio、scikit-learn、GDAL),已成为处理此类数据的核心工具。本文以Landsat-8数据为例,演示辐射校正→特征提取→监督分类→精度评…...
数字空间与VR有什么关系?什么是数字空间?
数字空间与VR的关系 数字空间与虚拟现实(VR)之间存在着紧密而复杂的关系,它们相互影响、共同促进发展。为了深入理解这一关系,我们需要明确数字空间的基本概念及其与VR技术的相互作用。 数字空间的概念 数字空间,通常…...
navicat导入sql文件 所有问题解决方法集合
问题一:mysql导入大批量数据出现MySQL server has gone away的解决方法 方法一: 查看mysql max_allowed_packet的值 show global variables like max_allowed_packet;可以看到是64M(67108864/1024/1024) 调整为所需大小 例如我们需要调整为1024M(102…...
3、有Bluetooth,LCD,USB,SD卡,PSRAM,FLASH、TP等软硬件驱动开发经验优先考虑
首先,Bluetooth驱动开发经验。蓝牙是一种无线通信技术,广泛应用于设备之间的数据传输,比如耳机、键盘、智能家居设备等。驱动开发可能涉及底层协议的实现、与硬件的交互,以及确保兼容性和稳定性。需要了解蓝牙协议栈,如…...
【k8s】PV,PVC的回收策略——return、recycle、delete
PV 和 PVC 的回收策略主要用于管理存储资源的生命周期,特别是当 PVC 被删除时,PV 的处理方式。回收策略决定了 PV 在 PVC 被删除后的行为。 回收策略的类型 Kubernetes 提供了三种主要的回收策略,用于管理 PV 的生命周期: Reta…...
K8S探针的应用
目录: 1、探针的简介2、启用探针2.1、启用就绪探针2.2、启用存活探针2.3、启用启动探针(可选) 1、探针的简介 在Kubernetes中,探针(Probes)是用来检查容器健康状况的工具,它们帮助Kubernetes了…...
c++STL——stack、queue、priority_queue的模拟实现
文章目录 stack、queue、priority_queue的模拟实现使用部分模拟实现容器适配器deque的介绍原理真实结构deque的迭代器deque的操作deque的优缺点 stack的模拟实现按需实例化queue的模拟实现priority_queue的模拟实现为何引入仿函数代码实现 stack、queue、priority_queue的模拟实…...
【Redis】字符串类型List 常用命令详解
文章目录 1. 添加1.1 lpush - 从左或Rpush - 从右添加元素1.2 linsert - 插入新值到某个值前后 2. 获取2.1 lrange - 根据区间获取值2.2 lindex - 根据下标获取值2.3 llen - 获取列表的长度 3. 删除3.1 lpop - 移除最左或rpop - 最右的元素3.2 lrem - 移除指定的值3.3 rpoplpus…...
.NET仓储层在 using 块中创建 SqlSugarClient 的风险
如题,先看代码示例 using 块的使用 public ISugarQueryable<T> GetSet(Expression<Func<T, bool>> whereExpression null) {using (SqlSugarClient dbClient SqlSugarInstance.GetInstance()){var query dbClient.Queryable<T>();if (w…...
PowerQuery逆透视将二维表转换为一维表
PowerQuery逆透视将二维表转换为一维表 原因:为什么要转成一维表? 实例: 1.例如如果用二维表做占比图,我们需要将所有的指标列添加到值上,如图: 2.如果用一维表,我们只需要添加一个指标列和一…...