寫一個 Vue DevTools，讓開發體驗飛一會

前言

近年來，人們越來越關注開發者體驗 (DX)。工具和框架也一直在努力改進 DX，比如這兩年光速發展的 Vite。在大多數人的印象中，Vite 的特點是快，但是在我看來讓它發展迅速並在前端構建工具佔據一席之地的主要原因是它易用且擴展性強的插件設計機制，這讓開發者能以較低成本集成 Vite 到他們的工具和框架中，時至今日，大多數主流框架及工具都已經支持 Vite，Vite 的生態也已經十分繁榮。Anthony Fu 在 Vue Amsterdam 2023 上開源了 Nuxt DevTools，這是一個可以幫助我們瞭解我們的 Nuxt 應用並進一步改善開發者體驗的工具，它深深地觸動和啓發了我。Nuxt 可以有這麼酷的工具，那麼 Vue 能不能也有一個呢？我們都知道官方已經有一個 Vue DevTools 的瀏覽器擴展，那麼我們能不能做一個跟 Vite 綁定的 Vue DevTools，在實現原先 Vue Devtools 能力的同時並集成現有 Vite 生態的一些插件來擴展更強的能力呢？並且我們可以通過暴露一些配置和能力來允許用戶擴展和定製一些功能，來獲取更好的靈活性。基於以上的思考，vite-plugin-vue-devtools 誕生了，讓我們來看看它帶來了什麼!

介紹 Vue DevTools

Overview

展示應用程序的快速概覽，擴展應用正在使用的 Vue 版本、頁面和組件數量。

Pages

Pages Tab 展示了當前註冊的路由並且提供了一個快捷的方式進行路由導航。對於動態路由，它還提供了一個表單來交互式地填寫每個參數。你還可以在搜索框輸入指定的路徑來匹配相應的路由。

Components

Components Tabs 展示了你在應用程序使用的組件和它們的層級關係。你可以選中相應的組件來查看它的詳細信息 (例如 data、props 等)。

Assets

Assets Tab 展示了你的靜態資源列表 (目前只展示 Vite config.publicDir 目錄下資源) 以及它們的詳細信息，你可以在瀏覽器打開或下載它們。

Timeline

Timeline Tab 分爲三個分類：分別是性能、路由跳轉及 Pinia。你可以切換它們來查看對應的狀態變化及時間線。

Routes

Routes Tab 是一個與 Vue Router 進行集成的功能，它允許你查看你所註冊的路由及相關詳細信息。

Pinia

Pinia Tab 是一個與 Pinia 進行集成的功能，它允許你查看你所註冊的模塊及相關詳細信息。

Graph

Graph Tab 提供了顯示組件之間關係的依賴視圖。

Inspect

Inspect 集成了 Vite -plugin- Inspect，允許你檢查 Vite 的轉換步驟。瞭解每個插件如何轉換你的代碼並發現潛在問題是很有幫助的。

Inspector

你也可以使用 “Inspector” 特性來檢查 DOM 樹，看看是哪個組件在渲染它。單擊以轉到特定行的編輯器。使更改更容易，而不需要徹底瞭解項目結構。(此功能基於 vite-plugin-vue-inspector 實現)

Vue DevTools 用法

安裝

# vite-plugin-vue-devtools 

npm install vite-plugin-vue-devtools -D

配置

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

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

注意事項

插件僅作用於開發模式
僅支持 Vue3.0+
目前僅支持單實例 Vue 應用 (多實例支持即將到來)
不支持 SSR 應用 (如果你正在使用 Nuxt，請直接使用 nuxt/devtools)

遵循 Vue devtools 配置，如果你配置了hide選項，它將同樣作用於此插件，例:

// 這個Vue實例將被插件忽略
createApp({
  render: () => h(App),
  devtools: {
    hide: true,
  },
})

致謝

這個插件的靈感高度來自於 Anthony Fu 創作的 nuxt/devtools，並且複用了它的 UI 及一些功能。

結語

插件目前還處於 Early Preview 階段、歡迎任何想法及 Bug 反饋。如果它對你有所幫助，請給它一個 Star (https://github.com/webfansplz/vite-plugin-vue-devtools) 支持作者 🌹。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/mK8Iix4YP4M2VzDeTx1kNA

前言