Entwickeln Sie Vue mit vue-devtools

Vorwort:

Da Vue datengesteuert ist, besteht das Problem, dass durch Betrachten der DOM-Struktur während der Entwicklung und beim Debuggen nichts analysiert werden kann.

Aber mit Hilfe des vue-devtools-Plug-Ins können wir die Datenstruktur einfach analysieren und debuggen.

1. Laden Sie die Chrome-Erweiterung herunter

GitHub-Download-Adresse:

Es wird empfohlen, npm Taobao Mirror zu verwenden und dem Abhängigkeitspaket zu folgen

Adresse:

Befehlszeileninstallation des npm Taobao-Spiegels:

$ npm install -g cnpm --registry= https://registry.npm.taobao.org

Dann können wir cnpm anstelle von npm verwenden, um den Abhängigkeitspaketen von npm zu folgen in der Tat zu langsam, um Abhängigkeitspakete zu installieren >2. cnpm installNachdem der Download abgeschlossen ist, öffnen Sie die Befehlszeile cmd und geben Sie den Ordner vue-devtools ein. Folgen Sie den Anweisungen Abhängigkeitspaket und NPM-Run-Build

3. Öffnen Sie Shells>chrome>src>manifest.json und ändern Sie „persistent“ :false in der JSON-Datei auf true

4. Erweitern Sie das Chrome-Plugin

1. Öffnen Sie den Chrome-Browser und klicken Sie auf „Einstellungen“. >Klicken Sie auf „Entwicklermodus“

2. Klicken Sie dann, um die dekomprimierte Erweiterung zu laden, und legen Sie dann den Shell>Chrome-Ordner in

ab

Öffnen Sie das von Vue geschriebene Projekt. F12 öffnet das Debugging-Tool zum Debuggen des Vue-Projekts.

Das obige ist der detaillierte Inhalt vonEntwickeln Sie Vue mit vue-devtools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!