近日，Vue 新一代开发者工具（DevTools）正式开源！Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用。下面就来看看新一代 Vue DevTools 的功能和使用方法！
图片
首先来看看 Vue DevTools 中都有哪些功能！
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
在 Vue 项目中使用 Vue DevTools 的方法有多种：
图片
下面来看看如何通过 Vite 插件和独立应用来使用 Vue DevTools。
注意：
第一种运行 Vue DevTools 的方法就是 Vite 插件。如果项目使用 Vite，强烈建议将其作为运行 DevTools 的首选项，因为它提供了更强大的功能。
注意：Vue DevTools 需要 Vite v3.1 或更高版本。
首先，通过以下命令来安装 Vue DevTools：
npm add -D vite-plugin-vue-devtools用法：
import { defineConfig } from 'vite'import VueDevTools from 'vite-plugin-vue-devtools'export default defineConfig({ plugins: [ VueDevTools(), ],})配置项：
interface VitePluginVueDevToolsOptions { /** * append an import to the module id ending with `appendTo` instead of adding a script into body * useful for projects that do not use html file as an entry * * WARNING: only set this if you know exactly what it does. * @default '' */ appendTo?: string | RegExp /** * Customize openInEditor host (e.g. http://localhost:3000) * @default false */ openInEditorHost?: string | false /** * DevTools client host (e.g. http://localhost:3000) * useful for projects that use a reverse proxy * @default false */ clientHost?: string | false}配置项如下：
如果使用不受支持的浏览器，或者有其他特定需求（例如应用位于 Electron 中），可以使用独立应用。
图片
首先， 通过以下命令来全局安装 DevTools（可以全局安装，也可以作为项目依赖项安装，这里以全局安装为例）：
npm add -g @vue/devtools安装完成之后，在终端中运行以下命令：
vue-devtools然后将以下代码添加到应用 HTML 文件的<head>部分：
<script src="http://localhost:8098"></script>或者，如果想远程调试设备：
<script> window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098</script><script src="http://<your-local-ip>:8098"></script>可以在官方文档查看详情：https://devtools-next.vuejs.org/guide/standalone
本文链接：http://www.28at.com/showinfo-26-55099-0.htmlVue 新一代开发者工具正式开源！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号