Appearance
2. Environnement de dev intégré
Présentation
Vue.js inclut ce qu’on appelle un environnement de développement intégré. Cette environnement permet de simuler facilement l’environnement de production d’un projet en cours de développement, tout en disposant de fonctionnalités facilitant de débogage du projet. L’environnement configurera un serveur en local sur votre machine vous permettant de visualiser le rendu de votre site.
Une fonctionnalité particulièrement intéressante, est que l’environnement sera capable de prendre dynamiquement en compte chaque modification que vous apporterez à votre projet. C’est ce qu’on appelle du live reloading.
Prise en main
Pour lancer votre environnement de développement :
- Commencez par ouvrir un terminal Node.js.
- Rendez vous dans le dossier racine de votre projet.
- Exécutez la commande :
npm run dev.
INFO
💡 Il s’agit d’une commande raccourcie, automatiquement définie dans votre fichier package.json. Elle appelle en réalité la commande vite.
- Si votre projet ne présente pas d’erreur de compilation, Vue.js vous indiquera que votre site est consultable en local, par défaut sur le port 5173 :
http://localhost:5173/. Si le projet présente des erreurs, Vue.js vous fournira des informations sur la première erreur rencontrée.
- Rendez vous sur votre navigateur web préféré et renseignez l’url pour visualiser le rendu de votre application.
- Vous pouvez apporter des modifications au code de votre projet. A chaque enregistrement d’un fichier, le projet sera recompilé, et le rendu automatiquement mis à jour dans votre navigateur.
- Vous pouvez arrêter l’environnement en faisant
Ctrl+Cou simplement en fermant le terminal.
Les avantages du serveur de developpement.
En environnement de développement, Vue.js n’effectue pas un certain nombre d’optimisations qu’il ferait pour une mise en production.
Cela vous permet notamment, si une erreur Javascript se manifeste dans votre navigateur, d’obtenir le traceback correct de l’erreur, c’est-à-dire de connaitre précisément l’emplacement de la commande responsable de l’erreur dans votre code, malgré le fait que le projet ait été compilé.
Vous pourrez également afficher des informations dans la console du navigateur avec console.log(), ce qui est automatiquement éliminé en production.
A noter que par conséquent votre application sera un peu moins performante qu’une fois en production. Si vous utilisez des fonctionnalités nécessitant beaucoup de calculs, vous ressentirez plus rapidement des latences sur l’environnement de développement qu’en production.
Précaution d’usage
L’environnement de développement ne gère pas toujours parfaitement toutes les modifications que vous pouvez effectuer dans votre projet. En particulier, l’ajout d’une référence dans votre projet à une ressource statique, comme une image par exemple, qui n’était pas présente auparavant sur le site peut provoquer une erreur. Il peut être nécessaire de couper, puis relancer entièrement l’environnement pour qu’elle soit correctement prise en compte.
Face à une erreur de compilation que vous ne comprenez pas, ayant un rapport avec un fichier récemment ajouté au projet, pensez donc à relancer votre serveur entièrement. Cela vous évitera peut-être de longues minutes de débogage inutile.
Utiliser les devtools de Vue.js
Nous verrons dans les prochains chapitres que Vue.js à une conception différente des éléments présents dans le DOM de notre application, au travers de la notion de DOM virtuel. Les outils de développement proposés par les navigateurs web, pour visualiser la structure HTML du site ou encore la console Javascript, ne sont pas adaptés aux spécificités propres au framework Vue.js.
Heureusement, il existe une extension sur les principaux navigateurs web permettant d’étendre les outils de développement du navigateur pour les besoins de Vue.js.
Si ces outils complémentaires vous intéressent, pour pouvez facilement trouver cette extension pour Chrome et Edge, pour Firefox.
Une fois installée, vous pouvez vous rendre sur votre site via votre environnement de développement intégré. En inspectant votre page, vous trouverez un nouvel onglet nommé Vue parmi vos outils :
Vous pouvez déplacer cet onglet pour qu’il soit plus facilement accessible. Il vous permettra d’accéder à de très nombreuses informations sur vos composants, que nous découvrirons dans les prochaines parties de ce cours.
Aller plus loin
- Sur les vue dev-tools :