mcpField
D
devtools-vue

devtools-vue

github.com/vercel-labs开发18.8k111 次安装4 天前更新
代码仓库

关于 devtools-vue

用于在现有 Vue Provider 中添加 json-render 开发工具面板的适配器。面板提供共享的开发工具控制功能，并在生产构建中不渲染内容。

主要功能

  1. 01在 Vue 中挂载开发工具面板
  2. 02使用共享的开发工具控制功能
  3. 03通过键盘快捷键打开面板
  4. 04生产环境中隐藏面板

适用场景

  1. 01开发时检查 json-render
  2. 02在 Vue 应用中使用开发工具控制功能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vercel-labs/json-render --skill devtools-vue

安装后在 Claude Code 中输入/devtools-vue确认已加载。

详细介绍

@json-render/devtools-vue

json-render devtools 面板的 Vue 适配器。共享面板功能、属性、停靠行为和服务端流跟踪点请参阅 skills/devtools/SKILL.md。

安装

npm install @json-render/devtools @json-render/devtools-vue

挂载面板

在现有的 Vue json-render 提供方中挂载 JsonRenderDevtools：

<script setup>
import { JsonRenderDevtools } from "@json-render/devtools-vue";
</script>

<template>
  <JSONUIProvider :registry="registry">
    <Renderer :spec="spec" :registry="registry" />
    <JsonRenderDevtools :spec="spec" :catalog="catalog" :messages="messages" />
  </JSONUIProvider>
</template>

该组件在生产构建中不会渲染任何内容。面板提供共享的开发工具控件，包括 Ctrl/Cmd + Shift + J 快捷键。服务端流插桩请保留在 @json-render/devtools 中。

评论

支持 Markdown