Commencez un projet Vue 3 du bon pied

Bonjour à vous, ravi de vous retrouver pour ce tout premier contenu de Déjà Vue: comment qu'on fait pour commencer comme il faut projet Vue.js 3 ? 🤔

En effet Vue 3 arrive avec beaucoup de nouveautés: la composition API, le sucre syntaxique "" (pour la composition API uniquement), un meilleur support TypeScript, Vite (un nouvel outil pour dev et build du front-end).</span></p>

Vite qui a amené à la création de create-vue , un nouvel outil qui remplace vue-cli que nous avions l'habitude d'utiliser en Vue 2. Et côté Store, Pinia fait une percée dans l'univers de Vue 3 et fait concurrence à ce bon vieux Vuex.

Les nouveautés ne concernent donc pas seulement le coeur de Vue, mais tout l'écosystème, d'où les nombreuses questions qui se posent. Je m'en suis d'ailleurs posé beaucoup moi-même, ce mail a donc été assez long à pondre, le temps que je fasse le tour de la question comme il faut.

Alors quelles sont les recommandations actuelles pour commencer du bon pied un projet Vue 3 ? Accrochez vos ceintures, on plonge dans l'univers de Vue 3 !

Recommandations pour créer un nouveau projet Vue 3:

1) Côté éditeur de code: VSCode avec le plugin Volar

Attention, Volar peut entrer en conflit avec le plugin Vetur, veillez à ne pas avoir les deux activés en même temps sur le même projet.

2) Utiliser create-vue pour créer et développer le projet: npm init vue@next

create-vue est le remplaçant de vue-cli, basé sur Vite .

Il s'agit d'un outil de développement et de build pour le front-end, à la manière de vue-cli ( qui est, lui, basé sur Webpack), mais en beaucoup, beaucoup plus rapide. D'où le nom, vous l'aurez compris.

Attention, il faut noter que Vite se base sur les modules natifs de JavaScript des navigateurs ( c'est à dire, en gros, la syntaxe "import" / "export" , supporté par la balise ), vérifiez donc si la compatibilité des navigateurs correspond à vos attentes ici: </span><span style="color: #111111;"><a style="color: #111111;" href="https://caniuse.com/?search=javascript%20modules" target="_blank">v</a></span><span style="color: #111111;"><a>uejsvuejsvue</a></span><span style="color: #111111;">  (en résumé: ça ne marche pas avec Internet Explorer - rappelons au passage qu'il n'est plus supporté par MicroSoft depuis 2021).</span></p>

3) En lançant la commande "npm init vue@next", vous avez plusieurs options: voici mes recommandations:

✔️ Add TypeScript ? Yes => Choisissez en priorité ce qui met votre équipe et vous le plus à l'aise. Personnellement, c'est oui, je prends toujours TypeScript car Vue 3 est lui même codé en TypeScript: le support est donc bon et cela offre une auto-completion très agréable pour le dev. Pour celles et ceux qui craignent que ça soit trop lourd: faites un essai, vous verrez que l'inférence de type de TypeScript fait le gros du boulot et que vous n'êtes pas obligé de tout expliciter en permanence.

✔️ Add JSX Support ? No => Je ne me sers jamais de JSX pour les templates de Vue et c'est un usage très rare de mon expérience.

✔️ Add Vue Router for Single Page Applications ? Yes => Je bosse presque exclusivement sur des Single Page Applications donc oui, mais évidemment si vous n'avez aucun besoin de routeur côté client sur votre application Vue, ça sera non.

✔️ Add Vuex for state management ? No => Evan You recommande d'utiliser Pinia désormais : en réalité Pinia et le futur Vuex 5 sont quasi équivalents de ce que j'ai compris, sauf que Vuex 5 n'est pas encore sorti. Si vous souhaitez donc profiter des avantages de la composition API et d'un bon support TypeScript: Pinia.

✔️ Add Cypress For Testing ? Yes => Cypress permet de créer des tests end-to-end. Je vais pas vous mentir, je fais pas souvent des tests, mais quand ça m'arrive, je suis content que ça soit déjà en place et prêt à l'emploi.

Et voilà 😊 Votre dossier Vue 3 est prêt, plus qu'à faire tourner "npm install" puis "npm run dev" pour voir s'afficher, non sans émotion évidemment, notre premier projet Vue 3, propulsé par Vite ! Exceptionnel.

Faites vous plaisir, faites des modifs de code CSS ou autre, appuyez sur ctrl+s et observez que les changements s'affichent instantanément grâce à Vite. ✨ L'expérience développeur de Vite est vraiment très très cool.

Et voilà !

Avant de se quitter, explorons rapidement un composant pour noter quelques détails intéressants sur Vue 3:

Plusieurs remarques concernant la balise :

- Elle se trouve au-dessus du template. En Vue 2, la convention était plutôt de mettre le template en haut.

- L'attribut "setup" indique que nous sommes en train de coder avec la nouvelle composition API.

- L'attribut lang="ts" indique que nous faisons du TypeScript.

- Notez bien également qu'on importe un composant en précisant son extension .vue

- Il n'y a pas besoin de déclarer un objet composant si on utilise l'attribut setup avec la balise script.

- Le composant HelloWorld est disponible dans le template uniquement du fait qu'il soit importé (en Vue 2, il fallait le déclarer dans la clef "components" du composant)

Le contenu de la balise template devrait lui sembler parfaitement familier aux personnes qui ont déjà fait du Vue 2 !

C'est tout pour cette semaine ! 

 

 

Tous Les Articles
×

Vous y êtes presque...

Nous venons de vous envoyer un e-mail. Veuillez cliquer sur le lien contenu dans l'e-mail pour confirmer votre abonnement !

OK