【Nuxt系列文章】一文读懂Nuxt DevTools

举报
liuming9157 发表于 2023/05/13 10:48:15 2023/05/13
【摘要】 近期,Nuxt团队发布了官方开发者工具Nuxt DevTools. 官方团队为什么要发布Nuxt DevTools?Nuxt DevTools都有哪些功能呢?带着这些问题,我把官方关于Nuxt DevTools介绍的文章翻译成中文,给各位童鞋分享。

前言

大家好,我是刘明,十年创业老兵,开源技术爱好者。
近期,Nuxt团队发布了官方开发者工具Nuxt DevTools.

  • 官方团队为什么要发布Nuxt DevTools?
  • Nuxt DevTools都有哪些功能呢?

带着这些问题,我把官方关于Nuxt DevTools介绍的文章翻译成中文,给各位童鞋分享。

原文标题:Introducing Nuxt DevTools
原文链接:https://nuxt.com/blog/introducing-nuxt-devtools
作者:Anthony Fu
发布日期:2023年3月24日

我们在Vue Amsterdam 2023上宣布了Nuxt DevTools的预览,这是一个新工具,可帮助您了解您的 Nuxt 应用程序并进一步改善开发人员体验。今天我们发布了一个新的次要版本0.3.0,其中包含一系列更新和改进.

在这篇文章中,我们将探讨创建 Nuxt DevTools 背后的原因它如何增强您的开发体验以及您对未来的期望

开发者体验

近年来,人们越来越关注开发人员体验 (DX)。工具和框架一直在努力改进 DX。在此过程中,Nuxt 引入了许多创新功能和约定,使您的日常开发更轻松、更高效。
在 Nuxt 3 中,我们切换到Vite作为开发期间即时热模块替换 (HMR) 的默认捆绑器,从而为您的工作流程创建一个更快的反馈循环。此外,我们还引入了Nitro ,这是一种新的服务器引擎,允许您使用零配置将 Nuxt 应用程序部署到任何托管服务,例如Vercel、Netlify、Cloudflare等。
Nuxt 提供了许多内置的常见做法:

  • 在整个代码库中编写开箱即用的 TypeScript 和 ESM。
  • 构建单页应用程序 (SPA)、服务器端呈现 (SSR)、静态站点生成 (SSG),或按路由混合它们- 使用同构的相同代码库,无需任何显式设置。
  • 使用多个可组合函数,例如useState和useAsyncData,用于共享跨服务器端和客户端访问的状态。
  • 增强 SEO 工具,例如useHead和useSeoMeta,使meta标签管理变得轻而易举。

此外,布局系统、插件、路由中间件和其他工具等功能使应用程序创建更容易,代码库更有条理。
基于文件的路由和基于文件的服务器 API 等约定使路由直观且轻松。
组件自动导入使得创建可在任何 Vue 文件中直接使用的共享组件变得容易。与全局组件不同,它们是代码拆分的。我们还引入了组合函数自动导入,其中 Vue 的所有 API 都可以直接使用。Nuxt 模块还可以使要本地组合函数和自定义组合函数自动导。
最近,我们引入了仅在客户端和服务器端使用的组件,可以通过在文件名中添加.client.server来使用它们。所有这些约定都是完全类型化的,开发人员甚至可以在进行路由导航或从 API 获取数据时使用类型自动完成功能。这些约定显著减少了样板代码,避免了重复,并提高了生产力。
在生态系统方面,Nuxt 拥有庞大的开发人员社区,围绕它构建模块,提供数百个高质量模块。模块允许开发人员获得他们想要的功能的集成,而无需担心配置或最佳实践。

存在的问题

Nuxt 可以轻松创建一个大规模的应用程序,但是有一个问题:缺乏透明度
对于我们引入的每一个新特性和约定,我们都在为框架添加更多的抽象。
抽象是弱化复杂性、使构建更容易和工作更关注的好东西。另一方面,它们也会增加用户学习和理解背后原理的额外负担。例如,自动导入的组件来自何处,或者有多少模块正在使用某个组件等。它还会使代码难以调试。
我们需要权衡利弊,您必须学习和理解该工具才能有效地使用它。虽然我们改进了文档并提供了更多示例,但我们相信有机会改善缺乏透明度的问题

介绍 Nuxt DevTools

Nuxt DevTools是一种可视化工具,可帮助您了解您的 Nuxt 应用程序并进一步改善开发人员体验。它的创建是为了提高 Nuxt 和应用程序的透明度,找到性能瓶颈并帮助您管理您的应用程序和配置。
它作为实验模块引入,并在您的应用程序内部提供视图。安装后,它会在您的应用程序底部添加一个小图标。单击它将打开 DevTools 面板。
如需试用,请参阅安装指南

Nuxt DevTools选项卡介绍

Overview

显示您的应用程序的快速概览,包括您正在使用的 Nuxt 版本、页面、组件、模块和插件。它还会检查您的 Nuxt 版本,并允许您通过单击进行升级。

Pages

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

Components

Coponents选项卡显示您在应用程序中使用的所有组件及其来源。您也可以搜索它们并转到源代码。
nuxt-devtools-tab-组件

它还提供了显示组件之间关系的图形视图。您可以过滤组件以查看特定组件的依赖关系。这可能有助于识别意外的依赖关系并提高页面的性能和捆绑大小。
nuxt-devtools-组件图

nuxt-devtools-components-graph-filtered

您还可以使用“检查器”功能检查 DOM 树并查看哪个组件正在渲染它。单击以转到特定行的编辑器。无需透彻了解项目结构,即可更轻松地进行更改。
nuxt-devtools-tab-components-inspector

Imports

Imports选项卡显示所有注册到 Nuxt 的自动导入。您可以看到哪些文件正在导入它们,以及它们来自哪里。一些条目还可以提供简短描述和文档链接。
nuxt-devtools-tab-imports

Modules

Modules选项卡显示您已安装的所有模块,并提供指向其文档和源代码的链接。您可以在Nuxt Modules中找到更多可用模块。
nuxt-devtools-tab-modules-upgrade
最近我们推出了实验性升级功能,可以让您轻松升级 Nuxt 或模块。使用Terminal 选项卡,它透明地显示升级过程的输出。
nuxt-devtools-tab-modules-upgrade

Assets

显示所有静态资产及其信息的资产选项卡。您可以复制资产的路径,或使用它们的代码片段。未来,随着Nuxt Image的集成,您甚至可以一键优化图像。
nuxt-devtools-tab-资产

Plugins

Plugins选项卡显示您在应用中使用的所有插件。由于插件在安装应用程序之前运行,因此在每个插件上花费的时间应该最少,以避免阻止应用程序呈现。提供的每个插件的时间成本可以帮助找到性能瓶颈。
nuxt-devtools-选项卡插件

Hooks

Hooks 选项卡可以帮助您从客户端和服务器端监控每个 hook 花费的时间。您还可以查看每个挂钩注册了多少个监听器,以及它们被调用了多少次。这有助于找到性能瓶颈。
nuxt-devtools-tab-hooks

App Config

您可以在 DevTools 中检查和修改应用程序配置,尝试不同的配置并立即查看效果。
nuxt-devtools-app-config

Payload & Data

此选项卡显示由,和创建的状态。了解数据是如何获取的以及状态是如何管理的,或者被动地更改它们以查看它们对您的应用程序的影响会很有帮助。对于和,您还可以手动触发重新获取。useStateuseAsyncDatauseFetchuseAsyncDatauseFetch
nuxt-devtools-tab-payload

Terminals

在某些集成中,他们可能需要运行子流程来完成某些工作。在 DevTools 之前,您要么完全隐藏子进程的输出并吞下潜在的警告/错误,要么通过管道传输到标准输出并用多个输出污染您的终端。现在您可以在 DevTools 中获得每个进程的输出并清楚地隔离。
nuxt-devtools-tab-终端

Virtual Files

Virtual Files 选项卡显示 Nuxt 和 Nitro 生成的支持约定的虚拟文件。这有助于高级调试。
nuxt-devtools-tab-虚拟文件

Inspect

Inspect 暴露集成,允许您检查 Vite 的转换步骤。了解每个插件如何转换您的代码并发现潜在问题会很有帮助。
nuxt-devtools-vite-插件检查

VS Code

感谢VS Code Server,我们能够将功能齐全的VS Code 实例集成到 DevTools 中。您可以安装扩展程序并同步您的设置。这使您能够获得更紧密的反馈循环,您可以在其中更改代码并立即查看结果,而无需离开浏览器。
nuxt-devtools-tab-vscod

Module Contributed View

考虑到生态系统,Nuxt DevTools 被设计为灵活和可扩展的。模块可以向 DevTools 贡献自己的视图,为它们的集成提供交互式数据。以下是几个例子:

  • VueUse 模块提供了可用组合函数的搜索页面并查看其文档。
  • UnoCSS 模块提供了一个交互式检查器来查看每个模块如何为最终的 CSS 做出贡献。
  • Nuxt Icon 模块为所有可用的图标提供了一个搜索引擎。
  • Nuxt Vitest 模块为使用与 Nuxt 应用程序相同的管道运行的测试提供 Vitest UI。

对于模块作者

随着v0.3.0的发布,我们提高了模块作者为 DevTools 做出贡献的能力。
这包括:

  • 模块贡献视图
  • 访问客户端应用程序的上下文和开发工具的实用程序
  • 自定义 RPC 函数以在服务器和客户端之间进行通信
  • 子进程生成和输出流程化
  • @nuxt/devtools-kit- 一组实用程序可帮助您将模块与 DevTools 集成
  • @nuxt/devtools-ui-kit- DevTools 中使用的 UI 组件,使您的模块的视图与 DevTools 的其余部分保持一致
  • 使用 DevTools 集成创建模块的入门模板
    请查看Devtools 模块作者指南以了解更多信息。

我们还会做什么?

这只是旅程的开始。我们计划向 DevTools 添加更多功能,同时探索以更直观和有趣的方式呈现数据的方式。
Nuxt DevTools 的目标是:

  • 提高约定的透明度
  • 检查性能和分析
  • 互动有趣
  • 个性化文档
  • 轻松管理和搭建应用程序
  • 提供见解和改进
  • 让开发体验更愉快
    您可以查看我们的项目路线图并分享您的想法和建议,帮助我们改进 DevTools。
    您可以通过关注GitHub 存储库和关注Nuxt 的官方 Twitter来关注最新更新。
    感谢您的阅读,我们期待您的反馈和贡献!

翻译至此结束。
我是刘明,十年创业老兵,开源技术爱好者。无论你是交流学习,还是有开发需求,欢迎私信联系。
有问题,找老刘。

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容, 举报邮箱:cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。