记录 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.mzph.cn/news/126816.shtml

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

相关文章

【c++|opencv】二、灰度变换和空间滤波---2.直方图和均衡化

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 图像直方图、直方图均衡化 1. 图像直方图 #include <iostream> #include <opencv2/opencv.hpp>using namespace cv; using namespace std;…

Android NDK开发详解之调试和性能分析的系统跟踪概览

Android NDK开发详解之调试和性能分析的系统跟踪概览 系统跟踪指南 “系统跟踪”就是记录短时间内的设备活动。系统跟踪会生成跟踪文件&#xff0c;该文件可用于生成系统报告。此报告有助于您了解如何最有效地提升应用或游戏的性能。 有关进行跟踪和性能分析的全面介绍&#x…

2010年NOIP普及组第二轮第1题题解(原创)

1&#xff0e;数字统计 (two.pas/c/ cpp) 【问题描述】 请统计某个给定范围[L,R]的所有整数中&#xff0c;数字2出现的次数。 比如给定范围[2,22]&#xff0c;数字2在数2中出现了1次&#xff0c;在数12中出现1次&#xff0c;在数20中出现1次&#xff0c;在数21中出现1次&#x…

groovy下载与安装

Groovy是一种基于JVM&#xff08;Java虚拟机&#xff09;的敏捷开发语言&#xff0c;它结合了Python、Ruby和Smalltalk的许多强大的特性&#xff0c;Groovy 代码能够与 Java 代码很好地结合&#xff0c;也能用于扩展现有代码。由于其运行在 JVM 上的特性&#xff0c;Groovy也可…

Servlet 初始化参数(web.xml和@WebServlet)

1、通过web.xml方式 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://xmlns.jcp.org/xm…

3-性能分析-android-基于Choreographer渲染机制详解

3-性能分析-android-基于Choreographer渲染机制详解 一:主线程运行机制的本质1> 引入 Vsync 之前2> 引入 Choreographer二: Choreographer 简介1> 从 Systrace 的角度来看 Choreogrepher 的工作流程2> Choreographer 的工作流程三:Choreographer 处理一帧的逻辑…

XLua中lua读写cs对象的原理

LuaCallCS 1. 传递C#对象到Lua XLua在C#维护了两个数据结构,ObjectPool和ReverseMap。 首次传递一个C#对象obj到Lua时,对象被加入到ObjectPool中,并为它创建一个唯一标识objId,建立obj和objId的双向映射。 ObjectPool: objId->obj ReverseMap: obj->objId 如果该…

mysql---索引

概要 索引&#xff1a;排序的列表&#xff0c;列表当中存储的是索引的值和包含这个值的数据所在的行的物理地址 作用&#xff1a;加快查找速度 注&#xff1a;索引要在创建表时尽量创建完全&#xff0c;后期添加影响变动大。 索引也需要占用磁盘空间&#xff0c;innodb表数据…

科技战再次升级!国内前沿科技行业影响悬而未决

&#xff08;图片来源&#xff1a;网络&#xff09; 美国与中国的科技贸易战正在升级&#xff0c;美国总统拜登发布行政命令限制美国对半导体和微电子、量子信息技术和人工智能等特定行业的跨国投资。在此前美国对中国芯片相关出口的一系列限制之后&#xff0c;又增加了此项新…

每日一题(LeetCode)----二分查找(三)

每日一题(LeetCode)----二分查找&#xff08;三&#xff09; 1.题目&#xff08;69. x 的平方根 &#xff09; 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 **注意…

服务器数据恢复-VSAN环境下ESXI虚拟机无法访问的数据恢复方案

一、用户信息&#xff1a; 广东某单位 二、数据恢复环境&#xff1a; 主机操作系统&#xff1a;ESXI 分区类型&#xff1a;VSAN 存储介质清单 &#xff1a;一共8台服务器节点&#xff0c;每节点2个磁盘组&#xff0c;其中1个磁盘组配置1块SSD固态硬盘&#xff0c;4块1.2T机…

PCL 计算一个平面与一个三角形的交线

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里实现一个很有趣的功能,就是获取一个平面与一个三角形的交线,具体的思路很简单,就是借助之前的博客中的思路:Matlab 计算一个平面与一条线段的交点,我们只需要遍历三角形中的所有边即可获取我们想要的交线,…

【Linux】第七站:vim的使用以及配置

文章目录 一、vim1.vim的介绍2.vim基本使用3.vim的命令模式常用命令4.底行模式 二、vim的配置 一、vim 1.vim的介绍 vim编辑器&#xff0c;用来文本编写&#xff0c;可以写代码 它是一个多模式的编辑器 它有很多的模&#xff0c;不过我们暂时先只考虑这三种模式 命令模式插入模…

【ES专题】ElasticSearch快速入门

目录 前言从一个【搜索】说起 阅读对象阅读导航笔记正文一、全文检索1.1 什么是【全文检索】1.2 【全文检索】原理1.3 什么是倒排索引 二、ElasticSearch简介2.1 ElasticSearch介绍2.2 ElasticSearch应用场景2.3 数据库横向对比 三、ElasticSearch环境搭建3.1 Windows下安装3.2…

VueX环境的搭建

一、安装VueX npm i vuex // Vue3安装该版本 npm i vuex3 // Vue2安装该版本 因为我使用的是Vue2&#xff0c;所以安装的是3版本 二、配置VueX文件 在src目录下创建store文件夹&#xff0c;再创建index.js 在index.js中配置如下代码&#xff1a; // VueX配置文件/…

使用resnet18预训练模型实时检测摄像头画面中的物体(画面显示英文类名)

imagenet_class_index.cs文件下载 https://download.csdn.net/download/qq_42864343/88492936 代码 import osimport numpy as np import pandas as pdimport cv2 # opencv-python from tqdm import tqdm # 进度条 from PIL import Image # pillow import matplotlib.pyplot…

Linux shell编程学习笔记17:for循环语句

Linux Shell 脚本编程和其他编程语言一样&#xff0c;支持算数、关系、布尔、字符串、文件测试等多种运算&#xff0c;同样也需要进行根据条件进行流程控制&#xff0c;提供了if、for、while、until等语句。 之前我们探讨了if语句&#xff0c;现在我们来探讨for循环语句。 Li…

云原生---网络

ping ping是网络诊断工具&#xff0c;检测和特点主机地址之间的连通性 可以获得的关键信息&#xff1a; 01目标主机可达性 02RTT往返延迟 03丢包率 04TTL&#xff08;time to live&#xff09;数据包到主机经过的路由数量 05ping domain可以得到相应IP address 06ping不通七…

优先队列----数据结构

概念 不知道你玩过英雄联盟吗&#xff1f;英雄联盟里面的防御塔会攻击离自己最近的小兵&#xff0c;但是如果有炮车兵在塔内&#xff0c;防御塔会优先攻击炮车&#xff08;因为炮车的威胁性更大&#xff09;&#xff0c;只有没有兵线在塔内时&#xff0c;防御塔才会攻击英雄。…

css选择器,布局,BFC

一、选择器的优先关系 !important > 行内样式style > #id > .class > 标签div > 元素选择符 > *通用选择器 二、元素选择符有哪些 包含选择符:E F&#xff08;E所有的F包含子代&#xff0c;孙代&#xff0c;子子孙孙等等&#xff09;子选择符:E > F&am…