记录 vue + vuetify + electron 安装过程

NodeJs 版本: 20

内容来自:

Electron + Vue.js + Vuetify 构建跨平台应用_思月行云的博客-CSDN博客文章浏览阅读61次。Go coding!https://blog.csdn.net/kenkao/article/details/132600542

npm config set registry https://registry.npm.taobao.org
npm install -g yarnyarn global add @vue/cli// vue 创建项目时,选择 2.x 的版本,因为 vuetify 支持的 3.x 是preview版本,个人试了下有的控件不能用,比如 v-overlay,很难受
vue create files_managercd .\files_manager\// 下面是我的版本需要的,因为 Node 版本过高会报错
yarn config set ignore-engines true// 增加 View UI,选择 for 2 vue cli版本的
vue add vuetify添加完成后,可能会提示 Home xxx 的错误,需要找到 HomeView.vue,修改导出名称为 HomeViewvue add electron-builder// 运行 electron 测试
yarn electron:serve

安装完成后的进一步配置

【精选】Electron使用preload预加载及安全策略_electron preload-CSDN博客文章浏览阅读5k次。使用 Electron 很重要的一点是要理解 Electron 不是一个 Web 浏览器。它允许您使用熟悉的 Web 技术构建功能丰富的桌面应用程序,但是您的代码具有更强大的功能。JavaScript 可以访问文件系统,用户 shell 等。这允许您构建更高质量的本机应用程序,但是内在的安全风险会随着授予您的代码的额外权力而增加。_electron preloadhttps://blog.csdn.net/qq_30386941/article/details/127550392因为 electron 实现需要在vue 界面中监听 ipcRenderer.on 但是单纯的 import 会带来错误,所以需要修改监听方式:

创建 src/preload.js

const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('ipcRendererApi', {send: (channel, args) => ipcRenderer.send(channel, args),once: (channel, listener) => ipcRenderer.once(channel, listener),on: (channel, listener) => ipcRenderer.on(channel, listener),
});

在 backgroud.js 中引入

...
import path from "path";
...async function createWindow()
{const win = new BrowserWindow({
...webPreferences: {
...preload: path.join(__dirname, 'preload.js'),}
...

最后在 Vue 界面中可以直接使用来发送和监听

ipcRendererApi.send('send_test_message', 'Hello from renderer process!')ipcRendererApi.on('reply_test_message', function (args){console.log("Reply: ", args)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/178996.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB——MongoDB删除系统自带的local数据库

一、MongoDB删除系统自带的local数据库 1.1、linux环境进入mongo客户端 输入 mongo 命令,进入命令行客户端 进入admin库,并登录,查看所有数据库 #进入admin库 use admin #并登录admin db.auth("username","password")…

【蓝桥杯】2023省赛H题

考察知识点:双向链表,小根堆 完整代码在文章末尾 题目 【问题描述】 给定一个长度为 N 的整数数列: A1,A2,...,AN。你要重复以下操作 K 次 :…

项目经理的三国时代,刘备与刘关张的项目计划

刘备在历史的洪流中抓住了“光复汉室”的战略机会,凭借他的身份和仁义,成功吸引了关羽和张飞两位团队成员。他们三人在桃园结下了深厚的情谊,标志着刘备规划已久的“光复汉室”项目正式启动。 然而,由于刘备在项目管理上的目标不…

[0xGame 2023 公开赛道] week4 crypto/pwn/rev

最后一周结束了,难度也很大,已经超出我这认为的新生程度了。 crypto Orac1e 先看题,题目先是给了加密过的flag然后提供不限次数的解密,不过仅提供解密后unpad的结果。 from Crypto.Util.number import * from Crypto.Cipher i…

Linux | 文件系统

目录 前言 一、预备知识 二、文件相关的系统调用 1、C语言的文件操作 2、系统调用接口 (1)open函数 (2)close函数 (3)write函数 (4)read函数 3、代码实操 三、深入理解文…

高浓度化工废水处理工艺是怎样的

高浓度化工废水处理工艺主要包括以下步骤: 预处理:通过物理、化学和生物等方法对废水进行预处理,以去除其中的悬浮物、油污、重金属等有害物质。常用的预处理方法包括沉淀、过滤、吸附、氧化等。化学氧化:利用氧化剂(…

“没有酒瓶”的新春礼酒,泸州老窖的颠覆性之作

执笔 | 萧 萧 编辑 | 扬 灵 没有想到,新春礼酒还能跳出生肖酒造型桎梏,开创出“没有酒瓶的白酒”。 没有想到,即将要发布的新品就“藏”在每一位参会者都触手可及的餐桌正中。 没有想到,首发定价如此“实诚”,加…

【Git企业开发】第五节.远程操作

文章目录 前言一、理解分布式版本控制系统二、远程仓库 2.1 新建远程仓库 2.2 克隆远程仓库 2.3 向远程仓库推送 2.4 拉取远程仓库总结 前言 一、理解分布式版本控制系统 我们目前所说的所有内容(工作区,暂存区,版本库等等)&#x…

Django-vue-admin 滚动监听,锚点定位目录

就是实现滑动内容,目录也跟着滚动,同时点击目录,内容会滑动到指定位置 试过很多,反正都不适用Django-vue-admin框架,唯有这个功能可以,只是样式按照自己想要的改改就行, https://blog.csdn.ne…

如何让企业配件管理高效又智能!仓库配件出入库管理系统哪家的好用?

在当今快速发展的商业环境中,企业运营的效率和管理的重要性日益凸显。对于许多企业来说,仓库配件管理是一个关键的环节,它不仅涉及到物品的存储和分发,还与企业的成本控制和运营流程紧密相关。然而,管理仓库配件是一项…

NEFU数字图像处理(3)图像分割

一、图像分割的基本概念 1.1专有名词 前景和背景 在图像分割中,我们通常需要将图像分为前景和背景两个部分。前景是指图像中我们感兴趣、要分割出来的部分,背景是指和前景不相关的部分。例如,对于一张人物照片,人物就是前景&…

R语言在生态环境领域中的实践技术应用

R语言作为新兴的统计软件,以开源、自由、免费等特点风靡全球。生态环境领域研究内容广泛,数据常多样而复杂。利用R语言进行多元统计分析,从复杂的现象中发现规律、探索机制正是R的优势。为此,以鱼类、昆虫、水文、地形等多样化的生…

Git 标签(Tag)实战:打标签和删除标签的步骤指南

目录 前言使用 Git 打本地和远程标签(Tag)删除本地和远程 Git 标签(Tag)开源项目标签(Tag)实战打标签删除标签 结语开源微服务商城项目前后端分离项目 前言 在开源项目中,版本控制是至关重要的…

【免费活动】11月4日敏捷武林上海站 | Scrum.org CEO 亲临现场

活动介绍 过去的几年里,外界的风云变幻为我们的生活增添了一些不一样的色彩。在VUCA世界的浪潮里,每一个人都成为自己生活里的冒险家。面对每一次的变化,勇于探索未知,迎接挑战,努力追逐更好的自己。 七月&#xff0…

同城售后系统退款业务重构心得 | 京东云技术团队

一、重构背景 1.1、退款 到家、小时购、天选退款有2套结构,代码逻辑混乱; 其中小时购、天选部分售后单是和平生pop交互退款,部分是和售后中台交互退款;并且兼容3套逻辑; 痛点:代码繁重,缺乏…

素材收藏必备!免费获取这5个矢量图标库,设计更得心应手!

可以自由拉伸的矢量图标,在平面设计流程中的重要性,有过设计经验的用户一定不会陌生。 下面,我们给大家准备了5个免费使用的矢量logo图标库,建议大家一键收藏。 1:即时设计 即时设计的资源社区内有海量免费的矢量图…

PostgreSQL 数据库日志相关参数

PostgreSQL数据库的配置主要是通过修改数据目录下的 postgresql.conf和pg_hba.conf文件来实现的。 如果想从其他机器上登录该数据 库,需要把监听地址改成实际网络的地址,一种简单的方法是把地址 改成“*”,表示在本地的所有地址上监听&#…

新手学计算机编程入门,自学编程入门从哪里入手开始学习

新手学计算机编程入门,自学编程入门从哪里入手开始学习 给大家分享一款中文编程工具,零基础轻松学编程,不需英语基础,编程工具可下载。 这款工具不但可以连接部分硬件,而且可以开发大型的软件,向如图这个…

AndroidPicker的使用

项目地址:https://github.com/gzu-liyujiang/AndroidPicker 历史版本:https://github.com/gzu-liyujiang/AndroidPicker/blob/master/ChangeLog.md 依赖配置 // JitPack 远程仓库:https://jitpack.iomaven { url https://jitpack.io } 所有选择器的基…

Make.com实现多个APP应用的自动化的入门指南

Make.com是一款基于云的自动化平台,可帮助用户将多个应用程序连接在一起,并通过设置自动化流程来简化日常任务。Make.com提供丰富的API集成,支持连接各种流行的应用程序,包括社交媒体、电子商务、CRM等。 使用Make.com实现多个AP…