Créer une application Vue avec Vue CLI

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

Sans une configuration adéquate, le processus peut devenir long et sujet aux erreurs.

Cet article vous montre comment Vue CLI simplifie le développement avec des outils comme Webpack et Babel, pour une expérience de codage fluide et efficace.

Table de matière

Créer une app Vue avec Vue CLI et Webpack Installation Vue CLI : npm, yarn et démarrage 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 une 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 :

Installation Vue CLI : npm, yarn et démarrage

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 avez le choix entre npm et yarn. Utilisez la commande ‘npm install -g @vue/cli’ ou ‘yarn global add @vue/cli’ dans votre terminal, quelle que soit votre plateforme. Assurez-vous que votre environnement de développement est correctement configuré avant de commencer l’installation. Une fois installé, vous pouvez vérifier la version avec ‘vue –version’.

Comment créer une application avec Vue CLI ?

Pour créer une application avec Vue CLI, ouvrez un terminal et exécutez ‘vue create my-app’. Choisissez la version de Vue souhaitée, comme Vue 3, pour votre projet. Une fois la création terminée, utilisez ‘npm run serve’ pour démarrer le serveur local, puis accédez à votre application via le lien fourni. Cela vous permet de commencer à développer votre application Vue rapidement et efficacement.

Quelles sont les fonctionnalités de Webpack dans Vue CLI ?

Webpack est utilisé dans Vue CLI pour le regroupement de modules, créant ainsi un graphe de dépendances. Pendant le développement, Webpack compile votre projet et surveille les modifications, permettant un rechargement à chaud dans le navigateur pour une expérience de développement fluide. Il optimise également les modules pour une performance et une compatibilité maximales.

Quel rôle joue Babel dans Vue CLI ?

Babel dans Vue CLI convertit le code JavaScript moderne en une version plus ancienne pour assurer sa compatibilité avec divers navigateurs. Il traduit la nouvelle syntaxe JavaScript en une syntaxe plus ancienne, garantissant ainsi que votre application Vue fonctionne correctement sur toutes les plateformes, même celles qui ne supportent pas les dernières fonctionnalités JavaScript.

Quels fichiers sont créés par défaut dans un projet Vue CLI ?

Un projet Vue CLI génère des fichiers comme node_modules, public, et src. Node_modules contient les dépendances, public inclut des fichiers statiques comme index.html, et src est le répertoire principal pour le code source. Les fichiers de configuration comme package.json et babel.config.js sont également créés pour gérer les dépendances et la compilation du code.

Conclusion

En utilisant Vue CLI, vous pouvez simplifier et accélérer le développement d’applications Vue. Quelle fonctionnalité de Vue CLI souhaitez-vous explorer plus en profondeur pour vos projets futurs ?