当前位置: 首页 > news >正文

Electron开发构建工具electron-vite(alex8088)添加VueDevTools(VitePlugin)

零、介绍

本文章的electron-vite指的是这个项目👉electron-vite仓库,electron-vite网站
本文章的VueDevTools指的是VueDevTools的V
ite插件版👉https://devtools.vuejs.org/guide/vite-plugin

一、有一个用electron-vite创建的项目

二、安装vite-plugin-vue-devtools插件

npm add -D vite-plugin-vue-devtools

三、添加vite-plugin-vue-devtools插件

在项目根目录找到electron.vite.config.mjs文件
添加import语句
编辑renderer的plugins部分

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vueDevTools from 'vite-plugin-vue-devtools' // 添加此行, 第一处, import导入export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@renderer': resolve('src/renderer/src')}},plugins: [vue(),vueDevTools(), // 添加此行, 第二处, 在这里引入vueDevToolsAutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]}
})

四、使用

npm run dev
窗口下边缘就是安装好的vuedevtools
点击VUE图标打开主界面(非全局快捷键Alt+Shift+D),点击AIM图标使用组件检查器
请添加图片描述
在这里插入图片描述





在这里插入图片描述

相关文章:

Electron开发构建工具electron-vite(alex8088)添加VueDevTools(VitePlugin)

零、介绍 本文章的electron-vite指的是这个项目👉electron-vite仓库,electron-vite网站 本文章的VueDevTools指的是VueDevTools的Vite插件版👉https://devtools.vuejs.org/guide/vite-plugin 一、有一个用electron-vite创建的项目 略 二、…...

服务器数据恢复—raid5阵列热备盘上线失败导致EXT3文件系统不可用的数据恢复案例

服务器数据恢复环境: 两组分别由4块SAS硬盘组建的raid5阵列,两组阵列划分的LUN组成LVM架构,格式化为EXT3文件系统。 服务器故障: 一组raid5阵列中的一块硬盘离线。热备盘自动上线替换离线硬盘,但在热备盘上线同步数据…...

网络安全基础——网络安全法

填空题 1.根据**《中华人民共和国网络安全法》**第二十条(第二款),任何组织和个人试用网路应当遵守宪法法律,遵守公共秩序,遵守社会公德,不危害网络安全,不得利用网络从事危害国家安全、荣誉和利益,煽动颠…...

go-rod vs Selenium:自动化测试工具的比较与选择

自动化测试是软件开发过程中的关键环节,它能够帮助我们发现缺陷、验证功能并提高软件质量。随着Web技术的快速发展,市场上出现了多种自动化测试工具,其中Selenium和go-rod是两个备受关注的选择。本文将从多个维度对这两个工具进行比较&#x…...

Ubuntu20.04+ROS 进行机械臂抓取仿真:环境搭建(一)

目录 一、从官网上下载UR机械臂 二、给UR机械臂添加夹爪 三、报错解决 本文详细介绍如何在Ubuntu20.04ROS环境中为Universal Robots的UR机械臂添加夹爪。首先从官方和第三方源下载必要的软件包,包括UR机械臂驱动、夹爪插件和相关依赖。然后,针对gazeb…...

Pytorch微调深度学习模型

在公开数据训练了模型,有时候需要拿到自己的数据上微调。今天正好做了一下微调,在此记录一下微调的方法。用Pytorch还是比较容易实现的。 网上找了很多方法,以及Chatgpt也给了很多方法,但是不够简洁和容易理解。 大体步骤是&…...

PPT分享 | IBM集团业务流程架构顶层规划-订单到交付-销售到回款方案

PPT下载链接见文末~ IBM业务流程规划方法是一套结构化、体系化的流程设计理论,其企业流程框架(EPF)是一种用于企业业务流程架构设计梳理的方法论。 一、IBM业务流程规划方法的核心 IBM的BPM(业务流程管理)流程管理体…...

后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列

目录 并发集合 1. ConcurrentHashMap: 2. CopyOnWriteArrayList: 3. CopyOnWriteArraySet: 4. BlockingQueue系列: 5. ConcurrentSkipListMap 和 ConcurrentSkipListSet: 6. ConcurrentLinkedDeque:…...

基于LLama_factory的Qwen2.5大模型的微调笔记

Qwen2.5大模型微调记录 LLama-facrotyQwen2.5 模型下载。huggingface 下载方式Modelscope 下载方式 数据集准备模型微调模型训练模型验证及推理模型导出 部署推理vllm 推理Sglang 推理 LLama-facroty 根据git上步骤安装即可,要求的软硬件都装上。 llama-factory运行…...

resnet50,clip,Faiss+Flask简易图文搜索服务

一、实现 文件夹目录结构&#xff1a; templates -----upload.html faiss_app.py 前端代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widt…...

亚信安全与飞书达成深度合作

近日&#xff0c;亚信安全联合飞书举办的“走近先进”系列活动正式走进亚信。活动以“安全护航信息化 共筑数字未来路”为主题&#xff0c;吸引了众多数字化转型前沿企业的近百位领导参会。作为“走近先进”系列的第二场活动&#xff0c;本场活动更加深入挖掘了数字化转型的基础…...

Spring框架特性及包下载(Java EE 学习笔记04)

1 Spring 5的新特性 Spring 5是Spring当前最新的版本&#xff0c;与历史版本对比&#xff0c;Spring 5对Spring核心框架进行了修订和更新&#xff0c;增加了很多新特性&#xff0c;如支持响应式编程等。 更新JDK基线 因为Spring 5代码库运行于JDK 8之上&#xff0c;所以Spri…...

.net 8使用hangfire实现库存同步任务

C# 使用HangFire 第一章:.net Framework 4.6 WebAPI 使用Hangfire 第二章:net 8使用hangfire实现库存同步任务 文章目录 C# 使用HangFire前言项目源码一、项目架构二、项目服务介绍HangFire服务结构解析HangfireCollectionExtensions 类ModelHangfireSettingsHttpAuthInfoUs…...

python VS c++

一、语法特点 Python&#xff1a; 语法简洁、优雅&#xff0c;代码可读性极强&#xff0c;采用缩进来表示代码块&#xff0c;摒弃了像 C 那样使用大括号的传统方式&#xff0c;使得代码看上去十分清晰简洁。例如&#xff1a; ​ if 5 > 3:print("5大于3") elif 5 …...

windows C#-属性

属性提供了一种将元数据或声明性信息与代码(程序集、类型、方法、属性等)关联的强大方法。将属性与程序实体关联后&#xff0c;可以使用称为反射的技术在运行时查询该属性。 属性具有以下属性&#xff1a; 属性将元数据添加到您的程序中。元数据是有关程序中定义的类型的信息…...

Redis常见面试题总结(上)

Redis 基础 什么是 Redis&#xff1f; Redis &#xff08;REmote DIctionary Server&#xff09;是一个基于 C 语言开发的开源 NoSQL 数据库&#xff08;BSD 许可&#xff09;。与传统数据库不同的是&#xff0c;Redis 的数据是保存在内存中的&#xff08;内存数据库&#xf…...

小鹏汽车智慧材料数据库系统项目总成数据同步

1、定时任务处理 2、提供了接口 小鹏方面提供的推送的数据表结构&#xff1a; 这几个表总数为100多万&#xff0c;经过条件筛选过滤后大概2万多条数据 小鹏的人给的示例图&#xff1a; 界面&#xff1a; SQL: -- 查询车型 select bmm.md_material_id, bmm.material_num, bm…...

风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计

风尚云网前端学习&#xff1a;一个简易前端新手友好的HTML5页面布局与样式设计 简介 在前端开发的世界里&#xff0c;HTML5和CSS3是构建现代网页的基石。本文将通过一个简单的HTML5页面模板&#xff0c;展示如何使用HTML5的结构化元素和CSS3的样式特性&#xff0c;来创建一个…...

论文阅读:A fast, scalable and versatile tool for analysis of single-cell omics data

Zhang, K., Zemke, N.R., Armand, E.J. et al. A fast, scalable and versatile tool for analysis of single-cell omics data. Nat Methods 21, 217–227 (2024). 论文地址&#xff1a;https://doi.org/10.1038/s41592-023-02139-9 代码地址&#xff1a;https://github.com…...

【从零开始的LeetCode-算法】43. 网络延迟时间

有 n 个网络节点&#xff0c;标记为 1 到 n。 给你一个列表 times&#xff0c;表示信号经过 有向 边的传递时间。 times[i] (ui, vi, wi)&#xff0c;其中 ui 是源节点&#xff0c;vi 是目标节点&#xff0c; wi 是一个信号从源节点传递到目标节点的时间。 现在&#xff0c;…...

一文理解 Python 编程语言中的 .strip() 方法

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ Python 中的 strip() 方法&#xff1a;初学者友好指南 在 Python 中&#xff0c;strip() 是一个极为实用的字符串方法&#xff0c;主要用于移除字符串首尾的特定字符。默认情况下&#xff0c;它会清除…...

solr 远程命令执行 (CVE-2019-17558)

漏洞描述 Apache Velocity是一个基于Java的模板引擎&#xff0c;它提供了一个模板语言去引用由Java代码定义的对象。Velocity是Apache基金会旗下的一个开源软件项目&#xff0c;旨在确保Web应用程序在表示层和业务逻辑层之间的隔离&#xff08;即MVC设计模式&#xff09;。 Apa…...

【cocos creator】下拉框

https://download.csdn.net/download/K86338236/90038176 const { ccclass, property } cc._decorator;type DropDownOptionData {optionString?: string,optionSf?: cc.SpriteFrame } type DropDownItemData {label: cc.Label,sprite: cc.Sprite,toggle: cc.Toggle }cccl…...

从 Llama 1 到 3.1:Llama 模型架构演进详解

编者按&#xff1a; 面对 Llama 模型家族的持续更新&#xff0c;您是否想要了解它们之间的关键区别和实际性能表现&#xff1f;本文将探讨 Llama 系列模型的架构演变&#xff0c;梳理了 Llama 模型从 1.0 到 3.1 的完整演进历程&#xff0c;深入剖析了每个版本的技术创新&#…...

电话机器人的最佳应用

电话机器人的最佳应用 作者&#xff1a;开源呼叫中心系统 FreeIPCC&#xff0c;Github地址&#xff1a;https://github.com/lihaiya/freeipcc 电话机器人在多个领域中都展现出了其独特的优势和广泛的应用前景。以下是对电话机器人最佳应用的详细归纳&#xff1a; 一、销售与营…...

[面试]-golang基础面试题总结

文章目录 panic 和 recover**注意事项**使用 pprof、trace 和 race 进行性能调试。**Go Module**&#xff1a;Go中new和make的区别 Channel什么是 Channel 的方向性&#xff1f;如何对 Channel 进行方向限制&#xff1f;Channel 的缓冲区大小对于 Channel 和 Goroutine 的通信有…...

Fakelocation Server服务器/专业版 ubuntu

前言:需要Ubuntu系统 Fakelocation开源文件系统需求 Ubuntu | Fakelocation | 任务一 任务一 更新Ubuntu&#xff08;安装下载不再赘述&#xff09; sudo -i # 提权 sudo apt update # 更新软件包列表 sudo apt upgrade # 升级已安装的软…...

Node.js的http模块:创建HTTP服务器、客户端示例

新书速览|Vue.jsNode.js全栈开发实战-CSDN博客 《Vue.jsNode.js全栈开发实战&#xff08;第2版&#xff09;&#xff08;Web前端技术丛书&#xff09;》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 要使用http模块&#xff0c;只需要在文件中通过require(http)引入即可。…...

Jackson 对象与json数据互转工具类JacksonUtil

下面是一个基于 Jackson 的工具类 JacksonUtil&#xff0c;用于在 Java 项目中实现对象与 JSON 数据之间的互相转换。该工具类具有简洁、易用、通用的特点。 package com.fy.common.util;import com.fasterxml.jackson.core.JsonGenerator; import com.fasterxml.jackson.core…...

【ArcGISPro】根据yaml构建原始Pro的conda环境

使用场景 我们不小心把原始arcgispro-py3的conda环境破坏了,我们就可以使用以下方法进行修复 查找文件 在arcgis目录下找到yaml文件 如果没找到请复制以下内容到新的yaml文件 channels: - esri - defaults dependencies: - anyio=4.2.0=py311haa95532_0 - appdirs=1.4.4=p…...

对撞双指针(七)三数之和

15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组…...

反向代理服务器的用途

代理服务器在网络中扮演着重要的角色&#xff0c;它们可以优化流量、保护服务器以及提高安全性。在代理服务器中&#xff0c;反向代理服务器是一种特殊类型&#xff0c;常用于Web服务器前&#xff0c;它具备多种功能&#xff0c;能够确保网络流量的顺畅传输。那么&#xff0c;让…...

一些好的AI技术学习平台和资料(动态更新)

1. 大模型 1.1 提示词&#xff08;Prompt&#xff09; 目前&#xff0c;大模型技术已经深入到工作生活的方方面面&#xff0c;各技术大厂的大模型也层出不穷&#xff0c;从开始的OpenAI一家独大&#xff0c;到当今世界的“百模大战”。从一些日常使用的角度来说&#xff0c;模…...

wireshark抓包分析HTTP协议,HTTP协议执行流程,

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 使用WireShark工具抓取「HTTP协议」的数据包&#…...

路由缓存后跳转到新路由时,上一路由中的tip信息框不销毁问题解决

上一路由tip信息框不销毁问题解决 路由缓存篇问题描述及截图解决思路关键代码 路由缓存篇 传送门 问题描述及截图 路由缓存后跳转新路由时&#xff0c;上一个路由的tip信息框没销毁。 解决思路 在全局路由守卫中获取DOM元素&#xff0c;通过css去控制 关键代码 修改文…...

【Angular】async详解

在 Angular 中&#xff0c;async 关键字用于定义异步函数&#xff0c;通常与 await 一起使用来处理 Promise。这使得异步代码看起来更像同步代码&#xff0c;从而更容易理解和维护。 基本用法 定义异步函数&#xff1a;使用 async 关键字。等待 Promise 解析&#xff1a;使用…...

springboot/ssm综合小区管理系统Java社区物业停车缴费系统web物业源码

springboot/ssm综合小区管理系统Java社区物业停车缴费系统web物业源码 基于springboot(可改ssm)htmlvue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&…...

【51单片机】程序实验56.独立按键-矩阵按键

主要参考学习资料&#xff1a;B站【普中官方】51单片机手把手教学视频 前置知识&#xff1a;C语言 单片机套装&#xff1a;普中STC51单片机开发板A4标准版套餐7 码字不易&#xff0c;求点赞收藏加关注(•ω•̥) 有问题欢迎评论区讨论~ 目录 独立按键按键介绍实验5 独立按键 矩…...

SAP 零售方案 CAR 系统的介绍与研究

前言 当今时代&#xff0c;零售业务是充满活力和活力的业务领域之一。每天&#xff0c;由于销售运营和客户行为&#xff0c;它都会生成大量数据。因此&#xff0c;公司迫切需要管理数据并从中检索见解。它将帮助公司朝着正确的方向发展他们的业务。 这就是为什么公司用来处理…...

2024 APMCM亚太数学建模C题 - 宠物行业及相关产业的发展分析和策略 完整参考论文(2)

5.2 问题一模型的建立与求解 5.2.1 分析发展情况 为了更好地理解数据的变化趋势,利用matlab通过六个子图对宠物行业中的关键变量进行了可视化展示。 图 1. 宠物数量变化展示了 猫数量、狗数量 和 总宠物数量 在 2019-2023 年间的变化趋势。结果显示:猫的数量呈逐年上升的趋…...

嵌入式的C/C++:深入理解 static、const 与 volatile 的用法与特点

目录 一、static 1、static 修饰局部变量 2、 static 修饰全局变量 3、static 修饰函数 4、static 修饰类成员 5、小结 二、const 1、const 修饰普通变量 2、const 修饰指针 3、const 修饰函数参数 4. const 修饰函数返回值 5. const 修饰类成员 6. const 与 #defi…...

【数据库设计】软件系统需要同时设计注册日志表和登录日志表吗

是的&#xff0c;通常情况下&#xff0c;注册日志表和登录日志表是分别设计的&#xff0c;分别记录不同类型的事件信息。 注册日志表 记录用户的注册信息、注册方式以及是否成功等内容。登录日志表 记录用户每次登录的时间、IP 地址、设备信息、登录状态等内容。 尽管这两者看…...

vim 一次注释多行 的几种方法

在 Vim 中一次注释多行是一个常见操作。可以使用以下方法根据你的具体需求选择合适的方式&#xff1a; 方法 1&#xff1a;手动插入注释符 进入正常模式&#xff1a; 按 Esc 确保进入正常模式。 选择需要注释的多行&#xff1a; 移动到第一行&#xff0c;按下 Ctrlv 进入可视块…...

手机无法连接服务器1302什么意思?

你有没有遇到过手机无法连接服务器&#xff0c;屏幕上显示“1302”这样的错误代码&#xff1f;尤其是在急需使用手机进行工作或联系朋友时&#xff0c;突然出现的连接问题无疑会带来不少麻烦。那么&#xff0c;什么是1302错误&#xff0c;它又意味着什么呢&#xff1f; 1302错…...

Git(一)基本使用

目录 一、使用git -v 查看安装git版本 二、使用mkdir 创建一个文件&#xff0c;并使用 git init 在该目录下创建一个本地仓库&#xff0c; 三、通过git clone命令接入线上仓库 四、使用git status查看仓库状态信息 五、利用echo写入一个文件 并使用cat进行查看 【Linux】e…...

sklearn中常用数据集简介

scikit-learn库中提供了包括分类、回归、聚类、降维等多种机器学习任务所需的常用数据集&#xff0c;方便进行实验和研究&#xff0c;它们主要被封装在sklearn.datasets中&#xff0c;本文对其中一些常用的数据集进行简单的介绍。 1.Iris&#xff08;鸢尾花&#xff09;数据集…...

LRU缓存

什么是LRU缓存? LRU&#xff08;Least Recently Used&#xff09;是最近最少使用算法&#xff0c;是操作系统中用于分页置换的算法&#xff0c;如果要向内存中添加分页&#xff0c;并且内存分页已满的情况下&#xff0c;就选出最近一段时间最不常用的分页进行置换&#xff08;…...

.net6 使用 FreeSpire.XLS 实现 excel 转 pdf - docker 部署

FreeSpire.XLS && Aspose.Cells包都可以实现。实现过程中发现如下问题&#xff1a; 本地测试通过&#xff0c; docker部署服务器后报错&#xff1a; The type initializer for Spire.Xls.Core.Spreadsheet.XlsPageSetupBase threw an exception. 由于缺少依赖&#xf…...

HttpServletRequest req和前端的关系,req.getParameter详细解释,req.getParameter和前端的关系

HttpServletRequest 对象在后端和前端之间起到了桥梁的作用&#xff0c;它包含了来自客户端的所有请求信息。通过 HttpServletRequest 对象&#xff0c;后端可以获取前端发送的请求参数、请求头、请求方法等信息&#xff0c;并根据这些信息进行相应的处理。以下是对 HttpServle…...

[Python3] Sanic 框架构建高并发的 Web 服务

在 Python3 中使用 Sanic 框架来构建高并发的 Web 服务时&#xff0c;Sanic 因其异步和基于事件驱动的架构能够很好地处理高并发请求。下面是如何使用 Sanic 的一些要点和示例代码。 1. 安装 Sanic 首先确保你安装了 Sanic&#xff0c;可以通过以下命令安装&#xff1a; pip…...