Der folgende Artikel stammt von Front-End Power Bank, Autor CUGGZ
Seit kurzem ist Vues neue Generation von Entwicklertools (DevTools) offiziell Open Source! Vue DevTools ist ein Tool zur Verbesserung der Vue-Entwicklererfahrung. Es bietet einige Funktionen, die Entwicklern helfen, Vue-Anwendungen besser zu verstehen. Werfen wir einen Blick auf die Funktionen und Nutzung der neuen Generation der Vue DevTools.
Offizielle Website: https://devtools-next.vuejs.org/
Funktion
Schauen wir uns zunächst an, welche Funktionen in Vue DevTools verfügbar sind.
-
Übersicht : Zeigt eine Übersicht der Anwendung an, einschließlich Vue-Version, Anzahl der Seiten und Anzahl der Komponenten.
-
Seiten : Die Registerkarte „Seiten“ zeigt die aktuelle Route und zugehörige Informationen an und bietet eine Möglichkeit, schnell zwischen den Seiten zu navigieren. Sie können auch das Textfeld verwenden, um die Übereinstimmungen für jede Route anzuzeigen.
-
Komponenten : Die Registerkarte „Komponenten“ zeigt Komponenteninformationen an, einschließlich Knotenbaum, Status usw., und bietet einige interaktive Funktionen, z. B. Bearbeitungsstatus, Scrollen zu Komponenten usw.
-
Assets : Auf der Registerkarte „Assets“ werden die Dateien im Projektverzeichnis angezeigt und Sie können Informationen zur ausgewählten Datei anzeigen.
-
Zeitleiste : Auf der Registerkarte „Zeitleiste“ können Sie frühere Versionen eines Status oder Ereignisses durchsuchen.
-
Router : Die Registerkarte „Router“ ist in vue-router integriert und ermöglicht Ihnen die Anzeige der Routenliste und ihrer Details.
-
Pinia : Die Registerkarte „Pinia“ ist in Pinia integriert, um Speicherlisten und deren Details anzuzeigen und den Status zu bearbeiten.
-
Diagramm : Die Registerkarte Diagramm zeigt die Beziehungen zwischen Modulen.
-
Einstellungen : Die Registerkarte „Einstellungen“ bietet einige Optionen zum Anpassen von DevTools.
-
Inspect : Inspect ist in vite-plugin-inspect integriert und kann die Konvertierungsschritte von Vite überprüfen.
-
Inspektor : Integriert in vite-plugin-vue-inspector kann der Inspektor den DOM-Baum Ihrer App untersuchen und die Komponenten sehen, die ihn rendern, sodass Sie leichter finden können, wo Änderungen vorgenommen werden müssen.
-
Eigenständiges Fenster : Vue DevTools kann als eigenständiges Fenster ausgeführt werden, was sehr hilfreich ist, wenn Sie Ihre Anwendung auf einem kleinen Bildschirm debuggen möchten.
verwenden
Es gibt viele Möglichkeiten, Vue DevTools in Vue-Projekten zu verwenden:
-
Vite-Plugin
-
Eigenständige Anwendung
-
Chrome-Erweiterung (derzeit in Entwicklung)
Werfen wir einen Blick darauf, wie Sie Vue DevTools über Vite-Plug-Ins und eigenständige Anwendungen verwenden.
Beachten:
DevTools ist nur mit Vue 3 kompatibel. Wenn Sie Vue2 verwenden, verwenden Sie stattdessen vue-devtools.
Wenn Sie Nuxt verwenden, verwenden Sie nuxt-devtools für ein leistungsfähigeres Entwicklererlebnis.
Vite-Plugin
Die erste Möglichkeit, Vue DevTools auszuführen, ist das Vite-Plugin. Wenn Ihr Projekt Vite verwendet, wird dringend empfohlen, die Ausführung von DevTools zu bevorzugen, da es leistungsfähigere Funktionen bietet.
Hinweis: Vue DevTools erfordert Vite v3.1 oder höher .
Installieren Sie zunächst Vue DevTools mit dem folgenden Befehl:
npm add -D vite-plugin-vue-devtools
Verwendung:
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
VueDevTools(),
],
})
Konfigurationselemente:
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
}
Die Konfigurationselemente lauten wie folgt:
-
appendToid: Hängt am Ende einen Import an das Modul anappendTo, anstatt das Skript hinzuzufügen<body>. Sehr nützlich für Projekte, die keine HTML-Dateien als Einstiegspunkte verwenden. Beachten Sie, dass Sie diese Option nur einstellen sollten, wenn Sie genau wissen, was sie bewirkt. Der Standardwert ist''. -
openInEditorHost: Passen Sie den Host an, auf dem der Editor geöffnet ist (zum Beispiel:http://localhost:3000). Der Standardwert istfalse. -
clientHost:DevTools-Client-Host (z. B.:http://localhost:3000), nützlich für Projekte, die Reverse-Proxys verwenden. Der Standardwert istfalse.
Eigenständige Anwendung
Wenn Sie einen nicht unterstützten Browser verwenden oder andere spezifische Anforderungen haben (z. B. dass die App in Electron ist), können Sie die eigenständige App verwenden.
Installieren Sie DevTools zunächst global über den folgenden Befehl (es kann global oder als Projektabhängigkeit installiert werden, hier nehmen wir die globale Installation als Beispiel):
npm add -g @vue/devtools
Führen Sie nach Abschluss der Installation den folgenden Befehl im Terminal aus:
vue-devtools
Fügen Sie dann den folgenden Code zu <head>dem Abschnitt hinzu, in dem Ihre HTML-Datei angewendet wird:
<script src="http://localhost:8098"></script>
Oder wenn Sie Ihr Gerät aus der Ferne debuggen möchten:
<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>
Details finden Sie in der offiziellen Dokumentation: https://devtools-next.vuejs.org/guide/standalone
