Ajout d'un avertissement de dépréciation à Vue Router

Introduction

Dans ce projet, vous allez apprendre à ajouter un avertissement de dépréciation à la méthode router.addRoutes() dans la version vue-router-3.4.9. C'est une tâche importante car la méthode router.addRoutes() a été dépréciée dans Vue Router v3.5.0 et a été supprimée dans Vue Router 4. En ajoutant l'avertissement de dépréciation, vous pouvez aider les développeurs utilisant la version plus ancienne de Vue Router à prendre conscience des changements à venir et à migrer vers la nouvelle méthode router.addRoute().

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Localiser la méthode addRoutes dans le fichier vue-router-3.4.9/src/index.js
• Ajouter un avertissement de dépréciation à la méthode addRoutes
• Rebâtir et publier le package mis à jour vue-router-3.4.9
• Redémarrer l'application et observer le message d'avertissement dans la console du navigateur

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Identifier et modifier les méthodes dépréciées dans une bibliothèque
• Comprendre l'importance de fournir des avertissements de dépréciation pour aider les développeurs à migrer vers les versions plus récentes
• Apprendre le processus de rebâtissage et de publication d'une version mise à jour d'une bibliothèque
• Observer les effets de vos modifications dans l'application en cours d'exécution

Ajoutez un avertissement de dépréciation à router.addRoutes()

Pour commencer, regardez la structure de répertoire des fichiers sur la gauche comme suit :

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

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Ouvrez la console du navigateur et observez l'affichage, qui devrait ressembler à ceci ci-dessous sans messages d'avertissement.

Dans cette étape, vous allez apprendre à ajouter un avertissement de dépréciation à la méthode router.addRoutes() dans la version vue-router-3.4.9.

1. Ouvrez le fichier vue-router-3.4.9/src/index.js.

2. Localisez la méthode addRoutes de la classe VueRouter.

3. Ajoutez le message d'avertissement suivant à la méthode :

   addRoutes(routes: Array<RouteConfig>) {
     console.warn("router.addRoutes() est dépréciée et a été supprimée dans Vue Router 4. Utilisez router.addRoute() à la place.");
     this.matcher.addRoutes(routes);
     if (this.history.current!== START) {
       this.history.transitionTo(this.history.getCurrentLocation());
     }
   }
   

   Cela imprimera un message d'avertissement dans la console lorsque la méthode addRoutes() est appelée.

Redémarrez l'application et observez l'avertissement

Dans cette étape, vous redémarrerez l'application et observerez le message d'avertissement dans la console du navigateur.

1. Dans le terminal, accédez au répertoire vue-router-3.4.9.

2. Exécutez la commande npm install pour installer les dépendances. Ce processus peut prendre un certain temps, veuillez être patient. (Si cela reste bloqué longtemps, appuyez sur Ctrl+C pour terminer le processus puis exécutez cette commande à nouveau.)

3. Une fois toutes les dépendances installées avec succès, exécutez la commande npm run build pour rebâtir et publier le projet.

4. Revenez sur la page web et rafraîchissez-la.

5. Ouvrez la console du navigateur et observez la sortie. Vous devriez voir le message d'avertissement imprimé dans la console :

   router.addRoutes() est dépréciée et a été supprimée dans Vue Router 4. Utilisez router.addRoute() à la place.
   

   Cela confirme que l'avertissement de dépréciation a été ajouté avec succès à la méthode router.addRoutes().

Félicitations! Vous avez terminé le projet en ajoutant un avertissement de dépréciation à la méthode router.addRoutes() dans la version vue-router-3.4.9.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.