良好的开发者体验(DX)对于开源产品的使用至关重要。 正因为如此,框架作者需要一直致力于DX和UX的改进,以免落后于竞争对手。 在今天的文章中,我想深入研究我最近发现的一个项目- Vue Vite DevTools。这个项目…
bit install vite-plugin-vue-devtools 然后,将这个新的 DevTools 作为 Vite 插件添加到 vite.config.ts 中: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import{defineConfig}from"vite";importVueDevToolsfrom"vite-plugin-vue-devtools";exportdefaultdefineConfig({base:"/my-vite-todomvc-app/",plugins...
DevTools 仅兼容 Vue 3。如果使用 Vue2,请改用 vue-devtools。 如果使用 Nuxt,请使用 nuxt-devtools 以获得更强大的开发者体验。 Vite 插件 第一种运行 Vue DevTools 的方法就是 Vite 插件。如果项目使用 Vite,强烈建议将其作为运行 DevTools 的首选项,因为它提供了更强大的功能。 注意:Vue DevTools 需要Vite v...
Anthony Fu在Vue Amsterdam 2023上开源了Nuxt DevTools,这是一个可以帮助我们了解我们的Nuxt应用并进一步改善开发者体验的工具,它深深地触动和启发了我。Nuxt可以有这么酷的工具,那么Vue能不能也有一个呢?我们都知道官方已经有一个Vue Devtools的浏览器扩展,那么我们能不能做一个跟Vite绑定的Vue Devtools,在实现原先V...
今天无意中发现一个基于 Vite Vue3 非常优雅的插件:vue-devtools。 插件介绍 Chrome 浏览器的 Vue Dev Tools 很多人都使用过,优雅哥分享的这个 devtools 不是浏览器插件,而是基于 vite vue3 的 Vite 插件,运行在页面上: vite-plugin-vue-devtools
想学习一下vue-devtools 打开组件的功能,vue-cli项目可以正常断点到launch-editor-middleware中,vite项目却不支持,这些chunks下的js是什么情况。。。vue-cli正常断点
vue-devtools的安装可以通过多种方式进行,包括通过Chrome扩展商店安装、本地下载安装以及使用vite插件等。 1. 通过Chrome扩展商店安装 这是最简单直接的方法,适用于大多数用户。 打开Chrome浏览器,进入Chrome Web Store。 搜索“Vue Devtools”。 找到官方的Vue Devtools扩展并点击“添加到Chrome”按钮。 2. 本地下载安...
1、devtools的官网: https://devtools.vuejs.org/getting-started/introduction 2、三种方式安装: https://devtools.vuejs.org/getting-started/installation 说明: Vite Plugin:基于vite的项目,可以试一下内置的模式。 Standalone App :如果您使用的浏览器不受支持,或者您有其他特定需求(例如您的应用程序在Electron中...
Vue Devtools是一个内嵌在Google Chrome浏览器中的插件,用于更好的调试Vue应用程序 源码:https://github.com/vuejs/vue-devtools#vue-devtools https://github.com/vuejs/devtools/releases/download/v6.1.3/devtools-chrome.zip安装方法: 下载后解压,在chrome地址栏中输入:chrome://extensions/直接将crx文件插入浏览...
在Vue 项目中使用 Vue DevTools 的方法有多种: Vite 插件 独立应用 Chrome 扩展(目前还在开发中) 下面来看看如何通过Vite 插件和独立应用来使用 Vue DevTools。 注意: DevTools 仅兼容 Vue 3。如果使用 Vue2,请改用 vue-devtools。 如果使用 Nuxt,请使用 nuxt-devtools 以获得更强大的开发者体验。 Vite 插件 ...