What?

在最新的 Vuejs Amsterdam 中，antfu (Anthony Fu) 大佬发布的 nuxt3 开发时管理面板

仓库

👉 nuxt/devtools: Unleash Nuxt Developer Experience (github.com)

功能

Overview

在 Overview 中，我们可以清晰的看到当前 nuxt 的版本号，用了多少组件，引入了多少 api，多少 nuxt 的模块和插件

Pages

在 Pages 中，我们可以看到文件路由的结构，不过我这里没开启，所以是空的

Components

在 Components 中则更丰富了，可以搜索自己项目中用到的组件，还有分类

• User Components 用户组件
• Runtime Components 运行时组件 (nuxt)
• Built-in Components 内置的组件 (nuxt)
• Components from libraries 包提供的组件 (第三方)

Imports

在 Imports 我们可以看到自己在项目中用到了哪些组合式函数，以及使用次数等等

• User Composables 用户函数
• Built-in Components 内置的函数 (nuxt)
• Composables from libraries 包函数 (第三方)

Modules

在 Modules 中，我们可以看到项目中用到了哪些 nuxt 模块，这在复杂的 nuxt 主题下用处是非常大的

Plugins

在 Plugins 中，我们可以看到项目中用到了哪些 nuxt 插件，旁边还做了友好提示

• virtual 虚拟模块
• module 模块
• client 前端
• service 服务端

Runtime Configs

在 Runtime Configs 中，我们看到 nuxt 的 app 配置，公开和私有运行时配置

Payload

在 Payload 中我们可以看到用了状态 State 和数据 Data

Hooks

在 Hooks 中，我们可以看到客户端的 hooks 和服务端的 hooks

Virtual Files

在 Virtual Files 中，我们可以看到所有的虚拟文件，可以搜索，或者进行预览

Inspect

而在 Inspect 中，可以看到所有请求的总览，跟 antfu/vite-plugin-inspect 是一样的

Other

剩下的就是面板的扩展，只有安装了相应的 nuxt 的 module 才会显示，这里我装了 unocss 和 vueuse，而 VS Code 那个是自带的

安装

安装 npm 依赖

npm install @nuxt/devtools -D

在 nuxt 配置文件中添加 @nuxt/devtools 的 module

// nuxt.config.js
export default defineNuxtConfig({
    modules: ["@nuxt/devtools"]
})

重新执行 nuxt dev ，在页面底部可以看到 nuxt 的按钮👇

点击即可出现

注意

• nuxt版本大于等于 ^3.2.0
• 仍不支持在 fnm 环境下中使用，仅在纯 nodejs 下支持。