Vue 新一代開發(fā)者工具正式開源！
近日，Vue 新一代開發(fā)者工具（DevTools）正式開源！Vue DevTools 是一個(gè)旨在增強(qiáng) Vue 開發(fā)人員體驗(yàn)的工具，它提供了一些功能來幫助開發(fā)者更好地了解 Vue 應(yīng)用。下面就來看看新一代 Vue DevTools 的功能和使用方法！
圖片
功能
首先來看看 Vue DevTools 中都有哪些功能！
- Overview：顯示應(yīng)用的概述，包括 Vue 版本、頁面數(shù)量和組件數(shù)量。
圖片
- Pages：Pages 選項(xiàng)卡顯示當(dāng)前的路由以及相關(guān)信息，并提供在頁面之間快速導(dǎo)航的方法，還可以使用文本框查看每個(gè)路由的匹配情況。
圖片
- Components：Components 選項(xiàng)卡顯示組件信息，包括節(jié)點(diǎn)樹、狀態(tài)等，并提供一些交互功能，例如編輯狀態(tài)、滾動(dòng)到組件等。
圖片
- Assets：Assets 選項(xiàng)卡顯示項(xiàng)目目錄中的文件，可以查看所選文件的信息。
- Timeline：Timeline 選項(xiàng)卡可以瀏覽狀態(tài)或事件的先前版本。
圖片
- Router：Router 選項(xiàng)卡與 vue-router 集成，可以查看路由列表及其詳細(xì)信息。
圖片
- Pinia：Pinia 選項(xiàng)卡與 Pinia 集成，可以查看存儲(chǔ)列表及其詳細(xì)信息，并編輯狀態(tài)。
圖片
- Graph：Graph 選項(xiàng)卡顯示模塊之間的關(guān)系。
圖片
- Settings：Settings 選項(xiàng)卡提供了一些用于自定義 DevTools 的選項(xiàng)。
圖片
- Inspect：Inspect 與 vite-plugin-inspect 集成，可以檢查 Vite 的轉(zhuǎn)換步驟。
圖片
- Inspector：Inspector 與 vite-plugin-vue-inspector 集成，可以檢查應(yīng)用的 DOM 樹，并查看渲染它的組件，這樣可以更輕松地找到需要進(jìn)行更改的位置。
圖片
- 獨(dú)立窗口：Vue DevTools 可以作為一個(gè)獨(dú)立的窗口運(yùn)行，當(dāng)你想在小屏幕上調(diào)試應(yīng)用時(shí)，它非常有幫助。
圖片
使用
在 Vue 項(xiàng)目中使用 Vue DevTools 的方法有多種：
- Vite 插件
- 獨(dú)立應(yīng)用
- Chrome 擴(kuò)展（目前還在開發(fā)中）
圖片
下面來看看如何通過 Vite 插件和獨(dú)立應(yīng)用來使用 Vue DevTools。
注意：
- DevTools 僅兼容 Vue 3。如果使用 Vue2，請(qǐng)改用 vue-devtools。
- 如果使用 Nuxt，請(qǐng)使用 nuxt-devtools 以獲得更強(qiáng)大的開發(fā)者體驗(yàn)。
Vite 插件
第一種運(yùn)行 Vue DevTools 的方法就是 Vite 插件。如果項(xiàng)目使用 Vite，強(qiáng)烈建議將其作為運(yùn)行 DevTools 的首選項(xiàng)，因?yàn)樗峁┝烁鼜?qiáng)大的功能。
注意：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(),
],
})配置項(xiàng)：
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
}配置項(xiàng)如下：
- appendTo：將一個(gè)導(dǎo)入附加到模塊 id 以 appendTo 結(jié)尾，而不是將腳本添加到 <body> 中。對(duì)于不使用 HTML 文件作為入口的項(xiàng)目非常有用。注意，只有在確切了解其功能的情況下才設(shè)置此選項(xiàng)。默認(rèn)值為 ''。
- openInEditorHost：自定義打開編輯器的主機(jī)（例如：http://localhost:3000）。默認(rèn)值為 false。
- clientHost：DevTools 客戶端主機(jī)（例如：http://localhost:3000），對(duì)于使用反向代理的項(xiàng)目非常有用。默認(rèn)值為 false。
獨(dú)立應(yīng)用
如果使用不受支持的瀏覽器，或者有其他特定需求（例如應(yīng)用位于 Electron 中），可以使用獨(dú)立應(yīng)用。
圖片
首先， 通過以下命令來全局安裝 DevTools（可以全局安裝，也可以作為項(xiàng)目依賴項(xiàng)安裝，這里以全局安裝為例）：
npm add -g @vue/devtools安裝完成之后，在終端中運(yùn)行以下命令：
vue-devtools然后將以下代碼添加到應(yīng)用 HTML 文件的<head>部分：
<script src="http://localhost:8098"></script>或者，如果想遠(yuǎn)程調(diào)試設(shè)備：
<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
查看
- 官網(wǎng)：https://devtools-next.vuejs.org/
- Github：https://github.com/vuejs/devtools-next
