Vite est un environnement de développement créé par le concepteur de vuejs, afin d'accélérer le développement de projet Web.
Il permet essentiellement de gérer la compilation des composants d'une application de façon "paresseuse", c'est-à-dire uniquement si le composant devient nécessaire.
Comparé à webpack, le gain de temps au lancement de l'application peut être prodigieux notamment quand il y a beaucoup de composants à compiler.
De plus, Vite fonctionne également avec d'autres framework JS, tels que React.
La façon la plus simple de commencer un projet avec vite est de lancer la commande :
npm create vite@latest
Ensuite, il suffit d'indiquer le nom du répertoire racine du projet, quel type d'application : Vue, et quel langage (par ex, javascript).
Comme indiqué dans le résultat, il faut ensuite aller dans le répertoire du projet et installer tous les paquets node : npm install.
Le problème de cette méthode est qu'elle ne permet pas d'intégrer directement les plugins tels que vue-router et pinia (c.a.d. le successeur de vuex).
Cela dit, il suffit de les installer puis de modifier le fichier de "lancement" de l'application.
Dans le répertoire racine du projet, taper :
npm install vue-router
npm install pinia
Attention, pour vue 3, il faut avoir la v4 de vue-router. Afin de vérifier si tout est bien installé : npm ls.
Il suffit de vérifier que la version de vue >= 3.0.0 et que vue-router >= 4.0.0, comme c'est le cas dans l'exemple ci-dessous.
npm ls
[email protected] ...
├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
Afin de retrouver une structure identique à celle des projet en v2, on crée un répertoire router pour contenir la définition des routes un répertoire views, pour contenir les composants qui sont affichés dans les balises <router-view>.