当前位置：首页 > 科技 > 软件

Vue 新一代开发者工具正式开源！

来源：责编：时间：2024-01-02 09:30:38 137观看

导读近日，Vue 新一代开发者工具（DevTools）正式开源！Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用。下面就来看看新一代 Vue DevTools 的功能和使用方法！图片功能首先

近日，Vue 新一代开发者工具（DevTools）正式开源！Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用。下面就来看看新一代 Vue DevTools 的功能和使用方法！

图片

功能

首先来看看 Vue DevTools 中都有哪些功能！

Overview：显示应用的概述，包括 Vue 版本、页面数量和组件数量。

图片

Pages：Pages 选项卡显示当前的路由以及相关信息，并提供在页面之间快速导航的方法，还可以使用文本框查看每个路由的匹配情况。

图片

Components：Components 选项卡显示组件信息，包括节点树、状态等，并提供一些交互功能，例如编辑状态、滚动到组件等。

图片

Assets：Assets 选项卡显示项目目录中的文件，可以查看所选文件的信息。

Timeline：Timeline 选项卡可以浏览状态或事件的先前版本。

图片

Router：Router 选项卡与 vue-router 集成，可以查看路由列表及其详细信息。

图片

Pinia：Pinia 选项卡与 Pinia 集成，可以查看存储列表及其详细信息，并编辑状态。

图片

Graph：Graph 选项卡显示模块之间的关系。

图片

Settings：Settings 选项卡提供了一些用于自定义 DevTools 的选项。

图片

Inspect：Inspect 与 vite-plugin-inspect 集成，可以检查 Vite 的转换步骤。

图片

Inspector：Inspector 与 vite-plugin-vue-inspector 集成，可以检查应用的 DOM 树，并查看渲染它的组件，这样可以更轻松地找到需要进行更改的位置。

图片

独立窗口：Vue DevTools 可以作为一个独立的窗口运行，当你想在小屏幕上调试应用时，它非常有帮助。

图片

使用

在 Vue 项目中使用 Vue DevTools 的方法有多种：

Vite 插件
独立应用
Chrome 扩展（目前还在开发中）

图片

下面来看看如何通过 Vite 插件和独立应用来使用 Vue DevTools。

注意：

DevTools 仅兼容 Vue 3。如果使用 Vue2，请改用 vue-devtools。
如果使用 Nuxt，请使用 nuxt-devtools 以获得更强大的开发者体验。

Vite 插件

第一种运行 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}

配置项如下：

appendTo：将一个导入附加到模块 id 以 appendTo 结尾，而不是将脚本添加到 <body> 中。对于不使用 HTML 文件作为入口的项目非常有用。注意，只有在确切了解其功能的情况下才设置此选项。默认值为 ''。
openInEditorHost：自定义打开编辑器的主机（例如：http://localhost:3000）。默认值为 false。
clientHost：DevTools 客户端主机（例如：http://localhost:3000），对于使用反向代理的项目非常有用。默认值为 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

查看

官网：https://devtools-next.vuejs.org/
Github：https://github.com/vuejs/devtools-next

本文链接：http://www.28at.com/showinfo-26-55099-0.htmlVue 新一代开发者工具正式开源！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Tomcat 架构设计 25 年后依旧能打！我学到了什么？

下一篇： MyBatis批量插入数据优化，那叫一个优雅！

标签：

热门焦点

一加Ace2 Pro官宣：普及16G内存引领24G

一加官方今天继续为本月发布的新机一加Ace2 Pro带来预热，公布了内存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引领，还有呢？#一加Ace2Pro#，2023 年 8 月，敬请期待。”同时
Mate60手机壳曝光致敬自己的经典设计

8月3日消息，今天下午博主数码闲聊站带来了华为Mate60的第三方手机壳图，可以让我们在真机发布之前看看这款华为全新旗舰的大致轮廓。从曝光的图片看，Mate 60背后摄像头面积依然
直屏旗舰来了 iQOO 12和K70 Pro同台竞技

旗舰机基本上使用的都是双曲面屏幕，这就让很多喜欢直屏的爱好者在苦等一款直屏旗舰，这次，你们等到了。据博主数码闲聊站带来的最新爆料称，Redmi下代旗舰K70 Pro和iQOO 12两款手
5月iOS设备性能榜：M1 M2依旧是榜单前五

和上个月一样，没有新品发布的iOS设备性能榜的上榜设备并没有什么更替，仅仅只有跑分变化而产生的排名变动，刚刚开始的苹果WWDC2023，推出的产品也依旧是新款Mac Pro、新款Mac Stu
六大权益！华为8月服务日开启：手机免费贴膜、维修免人工费

8月5日消息，一年一度的华为开发者大会2023（Together）日前在松山湖拉开帷幕，与此同时，华为8月服务日也式开启，到店可享六大专属权益。华为用户可在华为商城Ap
之家push系统迭代之路

前言在这个信息爆炸的互联网时代，能够及时准确获取信息是当今社会要解决的关键问题之一。随着之家用户体量和内容规模的不断增大，传统的靠"主动拉"获取信息的方式已不能满足用
从零到英雄：高并发与性能优化的神奇之旅

作者 | 波哥审校 | 重楼作为公司的架构师或者程序员，你是否曾经为公司的系统在面对高并发和性能瓶颈时感到手足无措或者焦头烂额呢？笔者在出道那会为此是吃尽了苦头的，不过也得
iQOO 11S屏幕细节公布：首发三星2K E6全感屏安卓最好的直屏手机

日前iQOO手机官方宣布，新一代电竞旗舰iQOO 11S将会在7月4日19:00正式与大家见面。随着发布时间的日益临近，官方关于该机的预热也更加密集，截至目前已
回归OPPO两年，一加赢了销量，输了品牌

成为OPPO旗下主打性能的先锋品牌后，一加屡创佳绩。今年618期间，一加手机全渠道销量同比增长362%，凭借一加 11、一加 Ace 2、一加 Ace 2V三款爆品，一加