Vue CLI : Créez Votre Application Vue

Développer une application Vue peut être complexe sans les bons outils.

Sans une structure adéquate, la gestion des dépendances et la compatibilité des navigateurs peuvent devenir problématiques.

Vue CLI, avec des outils comme Webpack et Babel, simplifie ces processus en fournissant une structure claire et une compatibilité étendue.

Table de matière

Créer app Vue avec Vue CLI et Webpack Installer Vue CLI via npm ou yarn FAQ Conclusion

Formation Vue JS 3 : Maîtriser les bases

Acquérez les compétences fondamentales pour créer des applications avec Vue JS 3!

Vue CLI utilise :

Webpack : pour le regroupement de modules ; le regroupement forme ce que nous appelons un « graphe de dépendances ». Cela se produit également au moment du développement. Lorsque vous développez un projet Vue via la CLI, il demande à Webpack de créer progressivement votre projet et de surveiller les modifications afin de pouvoir empaqueter les fichiers modifiés et les remplacer dans le navigateur.

Babel : consiste à transformer le code JavaScript moderne en code JavaScript plus ancien afin de garantir sa large compatibilité entre les navigateurs. Pour ce faire, il exploite le fait que la nouvelle syntaxe JavaScript peut souvent être exprimée comme l’ancienne syntaxe JavaScript, quoique de manière moins élégante.

Référence : Pour installer vue CLI, consulter son site officiel VUE CLI.

Il y a deux (02) options pour le télécharger, soit avec npm ou soit avec yarn

				
					
 npm install -g @vue/cli
# OR
yarn global add @vue/cli

On l’installe sur un terminal pour chaque système d’exploitation :

Pour voir sa version

				
					
 vue --version

Pour sa mise à jour, choisir npm ou yarn

				
					
 npmupdate -g @vue/cli
# OR
yarnglobal upgrade --latest @vue/cli

Créer app Vue avec Vue CLI et Webpack

Pour créer une application Vue CLI, allons au terminal que ce soit dans le VS Code ou externe. Ici nous choisissons le terminal externe. Et saisir le commande .

vue create my-app

Choisir vue3, ce qui nous convient

Une fois, la création est finie, saisir npm run serve pour démarrer le serveur

				
					
 C:\Users\Henintsoa\my-app>npm run serve

Et puis, clique sur le lien affiché pour lancer l’application

Le navigateur affiche ceci par défaut :

Installer Vue CLI via npm ou yarn

Ouvrir dans VS Code le projet qu’on vient de créer. Vous verrez

Commençons par le dossier node_modules contenant les dépendances pour faire fonctionner l’application, y parmi le vue, qui signifie que notre application contient vraiment vue.

Infos : On ne touchera jamais le node_modules pendant de développement.

Et puis dans le dossier public qui contient le favicon.ico et index.html

Dont il y a :

Ensuite le dossier src (source), c’est là que nous allons ajouter des dossiers ou fichiers pour pouvoir coder notre application.

Contenant:

Après le .gitignore : qui affiche tous les dossiers ou fichiers qui ne seront pas envoyer lors du commit sur github ou gitlab etc…

babel.config.js : ce qui signifie que notre application vuejs fonctionne avec babel.

jsconfig.json : fichier de configuration pour le compilateur.

package.json : contient les dépendances qu’on va utiliser avec leurs versions.

README.md : contient par défaut les commandes de bases en Vuejs ; mais c’est généralement là ou doit mettre l’explication et la documentation pour un projet sur git.

Et enfin, vue.config : c’est le transpilateur pour les dépendances seulement.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment installer Vue CLI ?

Pour installer Vue CLI, vous pouvez utiliser npm ou yarn. La commande avec npm est ‘npm install -g @vue/cli’, et avec yarn, c’est ‘yarn global add @vue/cli’. Installez-le via le terminal selon votre système d’exploitation pour commencer à développer des applications Vue. Assurez-vous que votre terminal est configuré correctement pour exécuter ces commandes.

Comment créer une application avec Vue CLI ?

Pour créer une application Vue avec Vue CLI, ouvrez un terminal et utilisez la commande ‘vue create my-app’. Sélectionnez la version de Vue (par exemple, Vue 3) qui vous convient. Une fois le processus de création terminé, utilisez ‘npm run serve’ pour démarrer le serveur local et tester votre application dans le navigateur. Cette méthode simplifie la configuration initiale de votre projet Vue.

Quel est le rôle de Webpack dans Vue CLI ?

Webpack, utilisé par Vue CLI, est essentiel pour le regroupement de modules. Il crée un ‘graphe de dépendances’ pendant le développement, surveillant les modifications et empaquetant les fichiers modifiés pour une mise à jour rapide dans le navigateur. Webpack facilite ainsi le développement en gérant efficacement les dépendances et en optimisant le chargement des fichiers.

Pourquoi utiliser Babel avec Vue CLI ?

Babel est utilisé dans Vue CLI pour transformer le code JavaScript moderne en une version plus ancienne, assurant ainsi une compatibilité entre différents navigateurs. Cela permet d’utiliser des fonctionnalités JavaScript récentes sans se soucier des limitations des navigateurs plus anciens. Babel simplifie le développement tout en maintenant une large compatibilité.

Que contient le dossier src de Vue CLI ?

Le dossier src (source) dans un projet Vue CLI est l’endroit où vous ajoutez des fichiers et dossiers pour coder votre application. Il contient généralement le code principal de votre application Vue. Ce dossier est essentiel, car il est au cœur du développement de l’application, permettant l’organisation et la gestion efficace du code source.

Conclusion

En utilisant Vue CLI, vous pouvez rationaliser le développement de vos applications Vue de manière efficace. Quelle fonctionnalité de Vue CLI trouvez-vous la plus utile dans votre processus de développement ?