Vue---vue3+vite项目内使用devtools,快速开发!

背景

我们在前期开发时,一般使用chrome或者edge浏览器,会使用vue-devtools或react-devtools(此插件个人未使用,可百度下是否可内嵌入项目!)来审查vue项目;这个需要安转浏览器插件才可支持!

目前

近期在使用命令

npm create vue@latest

创建vue3项目时,会提示是否安装devtools的插件!

故此本博客的目的是,如果已经开发或者维护阶段的vue+vite项目如何临时插入该插件使用!

使用步骤

1. 插件一般用于调试,所以无需安转到dependencies

npm i vite-plugin-vue-devtools -D

2. 导入到vite.config.js 或者 vite.config.ts配置中

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

3. 重新启动下项目

npm run dev 

最终效果如下:

 

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

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

相关文章

大模型llama结构技术点分享;transformer模型常见知识点nlp面经

1、大模型llama3技术点 参考:https://www.zhihu.com/question/662354435/answer/3572364267 Llama1-3,数据tokens从1-2T到15T;使用了MHA(GQA缓存);上下文长度从2-4-8K;应用了强化学习对其。 1、pretraini…

RedHat9 | Ansible 处理任务失败

环境版本说明 RedHat9 [Red Hat Enterprise Linux release 9.0]Ansible [core 2.13.3]Python [3.9.10]jinja [3.1.2] 1. 忽略任务失败 Ansible评估各任务的返回代码,从而确定任务是成功还是失败通常而言,当任务失败时,Ansible将立即在该主…

可以免费合并pdf的软件 合并pdf文件的软件免费 合并pdf的软件免费

在数字化办公的今天,pdf格式因其稳定性和跨平台兼容性被广泛使用。然而,当我们需要将多个 pdf 文件合并为一个时,却往往感到力不从心。本文将为你介绍几款强大的pdf文件合并软件,让你轻松管理文档。 方法一、使用pdf转换器 步骤1…

爬虫 APP 逆向 ---> 粉笔考研

环境: 粉笔考研 v6.3.15:https://www.wandoujia.com/apps/1220941/history_v6031500雷电9 模拟器:https://www.ldmnq.com/安装 magisk:https://blog.csdn.net/Ruaki/article/details/135580772安装 Dia 插件 (作用:禁…

后端开发刷题 | 笔试

Linux 中,下面哪个选项不是 inode 中记录的数据() A 最后一次读取时间 B 最近修改的时间 C 该文件的实际内容 D 该文件的容量 正确答案:C 解析:储存文件的元信息,比如文件的创建者、文件的创建日期、文件的…

MySQL-视图、存储过程和触发器

一、视图的定义和使用 视图是从一个或者几个基本表(或视图)导出的表。它与基本表不同,是一个虚表,视图只能用来查询。不能做增删改查(虚拟的表) 1.视图的作用 简化查询重写格式化数据频繁访问数据库过滤数据 2.创建视图 -- 创建视图 -- 语法…

【MATLAB APP】建立独立桌面APP

背景:已有MATLAB APP的.mlapp文件,但客户提出需要可以直接使用的exe文件。 要求:点开即用,无需下载MATLAB。使用者无法修改APP的代码。 一、环境配置 APP创建者:安装MATLAB R2023a,配置Application Compile…

【开源库编译 | zlib】 zlib库最新版本(zlib-1.3.1)在Ubuntu(Linux)系统下的 编译 、交叉编译(移植)

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

通信原理-实验六:实验测验

实验六 实验测验 一:测验内容和要求 测试需要完成以下几个步骤: 配置好以下网络图;占总分10%(缺少一个扣一分)根据下面图配置好对应的IP和网关以及路由等相关配置,保证设备之间连通正常;占总…

【学一点儿前端】本地或jenkins打包报错:getaddrinfo ENOTFOUND registry.nlark.com.

问题 今天jenkins打包一个项目,发现报错了 error An unexpected error occurred: "https://registry.nlark.com/xxxxxxxxxx.tgz: getaddrinfo ENOTFOUND registry.nlark.com". 先写解决方案 把yarn.lock文件里面的registry.nlark.com替换为registry.npmmi…

【计算机网络】期末实验答辩

注意事项: 1)每位同学要在下面做过的实验列表中选取三个实验进行答辩准备,并将自己的姓名,学号以及三个实验序号填入共享文档"1(2)班答辩名单"中。 2)在答辩当日每位同学由老师在表…

【React】事件绑定:深入解析高效处理用户交互的最佳实践

文章目录 一、什么是事件绑定?二、基本事件绑定三、绑定 this 上下文四、传递参数五、事件对象六、事件委托七、常见事件处理八、优化事件处理 React 是现代前端开发中最受欢迎的框架之一,其组件化和高效的状态管理能力使得构建复杂的用户界面变得更加容…

**卷积神经网络典型CNN**

SeNet SeNet(Squeeze-and-Excitation Networks)是ImageNet 2017年分类任务冠军,核心思想是:Squeeze(挤压、压缩)和Excitation(激励)两个操作,其主要目的是通过显示的构建特征通道之间的相互依赖关系,采用特征重定向的策略&#x…

光明乳业:以科技赋能品质,引领乳业绿色新未来

近日,光明乳业再次成为行业焦点,其在科技创新与绿色发展方面的卓越表现赢得了广泛赞誉。作为中国乳制品行业的领军企业,光明乳业始终坚守品质至上的原则,不断探索科技创新之路,致力于为消费者提供更高品质、更健康的乳…

webStorm 实时模板笔记

文章目录 1、单斜杠效果 2、双斜杠效果 3、控制台打印效果 1、单斜杠 /** $END$ */效果 2、双斜杠 /*** $END$* author Ikun* since $DATE$ $TIME$ */DATE date() ✔ TIME time() ✔效果 3、控制台打印 console.log("███████$EXPR_COPY$>>>>&a…

Internxt:适用于Linux开源安全云存储平台

有无数的云存储平台为您的文件提供安全可靠的存储空间。可在 Linux 上安装的热门云存储应用程序包括Dropbox、Nextcloud和Google Drive,遗憾的是,后者迄今为止不提供 Linux 客户端。 其他自托管选项包括OwnCloud、Pydio Cells、Seafile、Resilio和Synct…

暑期C++ printf和scanf的平替

有任何不懂的问题可以评论区留言&#xff0c;能力范围内都会一一回答 C中也有专门的输入和输出的方法 首先我们需要一个头文件&#xff0c;也就是#include<iostream> 然后根据我们命名空间的知识可知这个地方如果我们要使用必须先展开 可以全部展开比如using namespa…

Godot入门 04平台设计

新建创景&#xff0c;添加AnimatableBody2D节点。 添加Sprite2D节点 拖动图片 剪裁图片&#xff0c;吸附模式&#xff1a;像素吸附 添加CollisionShape2D&#xff0c;设置实际形状为矩形 重命名AnimatableBody2D节点为Platform&#xff0c;保存场景&#xff0c;拖动platform场景…

pikachu靶场之目录遍历、敏感信息泄露

一、目录遍历 漏洞概述 在web功能设计中,很多时候我们会要将需要访问的文件定义成变量&#xff0c;从而让前端的功能便的更加灵活。 当用户发起一个前端的请求时&#xff0c;便会将请求的这个文件的值(比如文件名称)传递到后台&#xff0c;后台再执行其对应的文件。 在这个过…

VSCode切换默认终端

我的VSCode默认终端为PowerShell&#xff0c;每次新建都会自动打开PowerShell。但是我想让每次都变为cmd&#xff0c;也就是Command Prompt 更改默认终端的操作方法如下&#xff1a; 键盘调出命令面板&#xff08;CtrlShiftP&#xff09;中,输入Terminal: Select Default Prof…