README.zh-CN.md

Vue DevTools ^预览

English | 简体中文

💡 想法 & 建议 | 🗺️ 项目路线图 | 🧑‍💻 Discord 频道

📖 介绍

vite-plugin-vue-devtools 是一个旨在增强 Vue 开发者体验的 Vite 插件。

🎉 特性

Pages

Pages 选项卡显示您当前的页面路由并提供快速导航的方法。对于动态路由，它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来测试每个路由的匹配情况。

Components

Components 选项卡显示您应用程序的所有组件树，您还可以选择它们来查看组件的详细信息（例如数据、属性）。

Assets

Assets 选项卡显示所有静态资源及其信息，您可以在浏览器中打开或下载它。

Timeline

Timeline 选项卡包含三个类别：性能、路由导航和 Pinia，您可以在它们之间切换以查看状态变化和时间线。

Routes

Routes 选项卡是与 Vue Router 集成的功能，允许您查看注册的路由及其详细信息。

Pinia

Pinia 选项卡是与 Pinia 集成的功能，允许您查看注册的模块及其详细信息。

Graph

Graph 选项卡提供了显示组件依赖关系的视图。

Inspect

Inspect 公开 vite-plugin-inspect 集成，允许您检查 Vite 的转换步骤，了解每个插件如何改变您的代码并发现潜在问题可能会有所帮助。

Inspector

您还可以使用 Inspector 功能来检查 DOM 树并查看哪个组件正在渲染它，单击可转到编辑器的特定行，使更改变得更加容易，而无需彻底了解项目结构。 (该功能基于 vite-plugin-vue-inspector)

📦 安装

# vite-plugin-vue-devtools 

pnpm install vite-plugin-vue-devtools -D

🦄 示例

Vite 配置

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools(),
    vue(),
  ],
})

选项

interface AnalyzeOptions {
  /**
   * @default true
  */
  rerenderTrace: boolean
}

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.
  */
  appendTo?: string | RegExp

  /**
   * Enable Vue DevTools to analyze the codebase by using Babel
   * @default
   * {
   *   rerenderTrace: true, // enable rerenderTrace feature
   * }
  */
  analyze?: Partial<AnalyzeOptions>
}

💡 注意

• 仅在 开发模式 下可用。

• 仅支持 Vue3.0+ 。

• 仅支持单实例 Vue 应用程序。

• 不支持 SSR （如果您使用 Nuxt ，请使用 nuxt/devtools）。

• 该插件遵循 Vue 的 DevTools 配置，因此如果您配置了 hide 选项，它也将应用于该插件。例如

  // This Vue instance will be ignored by the plugin.
  createApp({
    render: () => h(App),
    devtools: {
      hide: true,
    },
  })

📖 博客

• 介绍 Vue DevTools (Vite 插件)

🌸 致谢

• 该项目深受 nuxt/devtools 的启发，感谢 Anthony Fu 和 Nuxt 团队的出色工作

• vuejs/devtools

👨‍💻 贡献者

📄 License

MIT LICENSE