Deprecation-Warnung für Vue Router hinzufügen

Einführung

In diesem Projekt lernst du, wie du eine Deprecation-Warnung der router.addRoutes()-Methode in der vue-router-3.4.9-Version hinzufügen kannst. Dies ist eine wichtige Aufgabe, da die router.addRoutes()-Methode in Vue Router v3.5.0 als veraltet markiert und in Vue Router 4 entfernt wurde. Indem du die Deprecation-Warnung hinzufügst, kannst du Entwicklern, die die ältere Version von Vue Router verwenden, helfen, sich auf die zukünftigen Änderungen vorzubereiten und zur neuen router.addRoute()-Methode umzuschalten.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Die addRoutes-Methode in der Datei vue-router-3.4.9/src/index.js finden
• Eine Deprecation-Warnung der addRoutes-Methode hinzufügen
• Das aktualisierte vue-router-3.4.9-Paket neu bauen und veröffentlichen
• Die Anwendung neu starten und die Warnmeldung in der Browserkonsole beobachten

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Veraltete Methoden in einer Bibliothek zu identifizieren und zu modifizieren
• Die Wichtigkeit von Deprecation-Warnungen verstehen, um Entwicklern zu helfen, zu neueren Versionen zu migrieren
• Den Prozess des Neubaus und der Veröffentlichung einer aktualisierten Version einer Bibliothek lernen
• Die Auswirkungen deiner Änderungen in der laufenden Anwendung beobachten

Füge eine Deprecation-Warnung zu router.addRoutes() hinzu

Um loszulegen, betrachte die Verzeichnisstruktur der Dateien links wie folgt:

├── vue-router-3.4.9
├── vue.js
└── index.html

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, und du wirst die Seite sehen.

Öffne die Browserkonsole und beobachte die Ausgabe, die wie folgt aussehen sollte, ohne Warnmeldungen.

In diesem Schritt wirst du lernen, wie du eine Deprecation-Warnung der router.addRoutes()-Methode in der vue-router-3.4.9-Version hinzufügen kannst.

1. Öffne die Datei vue-router-3.4.9/src/index.js.

2. Locate die addRoutes-Methode der VueRouter-Klasse.

3. Füge die folgende Warnmeldung zur Methode hinzu:

   addRoutes(routes: Array<RouteConfig>) {
     console.warn("router.addRoutes() ist veraltet und wurde in Vue Router 4 entfernt. Verwende stattdessen router.addRoute().");
     this.matcher.addRoutes(routes);
     if (this.history.current!== START) {
       this.history.transitionTo(this.history.getCurrentLocation());
     }
   }

   Dies wird eine Warnmeldung in die Konsole ausgeben, wenn die addRoutes()-Methode aufgerufen wird.

Starte die Anwendung neu und beobachte die Warnung

In diesem Schritt wirst du die Anwendung neu starten und die Warnmeldung in der Browserkonsole beobachten.

1. Navigiere im Terminal zum Verzeichnis vue-router-3.4.9.

2. Führe den Befehl npm install aus, um die Abhängigkeiten zu installieren. Dieser Prozess kann einige Zeit in Anspruch nehmen, bitte seien Sie geduldig. (Wenn es lange anhält, drücken Sie Ctrl+C, um den Prozess zu beenden, und führen Sie dann diesen Befehl erneut aus.)

3. Nachdem alle Abhängigkeiten erfolgreich installiert wurden, führe den Befehl npm run build aus, um das Projekt neu zu bauen und zu veröffentlichen.

4. Gehe zurück zur Webseite und aktualisiere die Seite.

5. Öffne die Browserkonsole und beobachte die Ausgabe. Du solltest die Warnmeldung in die Konsole geschrieben sehen:

   router.addRoutes() ist veraltet und wurde in Vue Router 4 entfernt. Verwende stattdessen router.addRoute().

   Dies bestätigt, dass die Deprecation-Warnung erfolgreich der router.addRoutes()-Methode hinzugefügt wurde.

Herzlichen Glückwunsch! Du hast das Projekt abgeschlossen, indem du einer Deprecation-Warnung der router.addRoutes()-Methode in der vue-router-3.4.9-Version hinzugefügt hast.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.