Accueil Technologies VueJS n°1 : Créer un projet facilement avec les fichiers de base
VueJS 1

VueJS n°1 : Créer un projet facilement avec les fichiers de base

par Jérémy PASTOURET

Comme tout les développeurs Web, je n’ai pas pu échapper à la vague des frameworks JavaScript. Après pas mal de recherches sur le net et de débat avec moi-même, j’ai fait le choix de me lancer sur VueJS. Sans trop rentrer dans les détails car pour savoir ce qui est le mieux entre ReactJS, AngularJS et VueJS, personne n’a vraiment la réponse (pour l’instant).

J’ai décidé de me lancer sur ce framework car j’aime beaucoup Laravel. Or celui-ci soutient VueJS. L’autre point important, c’est que VueJS possède une documentation très claire. C’est très utile quand on est débutant : la courbe d’apprentissage me paraît moins rude.

Concernant ReactJS, c’est Facebook qui est derrière ce framework. Sur la partie éthique, je ne suis pas dans leur camp. Idem pour AngularJS qui est géré par Google, et dont les mises à jour ont été compliquées d’une version à une autre.

 

Installation de Vue cli pour créer un projet facilement

 

Installation de Vue cli pour créer un projet facilement

 

Pour suivre ce tutoriel, vous devez au préalable installer NodeJS. Vous trouverez toutes les informations nécessaires sur le site de NodeJs.

Pour commencer, on va installer Vue ainsi que son cli de manière globale. Pour ceux qui ne sont pas habitués au terme, voici une petite explication. Le cli est un petit programme, qui peut être fourni avec un framework pour exécuter des commandes en console afin de créer un projet (par exemple). De manière globale, c’est-à-dire peu importe où vous vous situerez dans votre système de fichiers, la commande sera accessible. Celle-ci n’est pas uniquement disponible dans un projet qui l’utilise.

Pour réaliser cette installation, vous devez exécuter la commande suivante :

 

sudo npm install -g @vue/cli

 

Normalement, vous aurez le même résultat que moi :

 

Installation de VueJs et le Cli

 

Maintenant que Vue est installé, nous allons pouvoir vérifier si notre système le reconnaît bien en lançant une commande simple :

 

vue --version

 

Vous devriez obtenir un résultat similaire – à l’exception du numéro de version :

 

VueJs Version

 

La partie installation est assez rapide. A présent, nous allons pouvoir créer un projet.

 

Création d’un projet avec les fichiers de base

Je ne vais pas me la jouer en mode nerd avec des tonnes de lignes d’instructions dans la console. C’est la raison pour laquelle nous allons utiliser cette commande uniquement :

 

vue ui

Lancement du client UI de VueJs

 

Celle-ci permet de lancer le cli en version graphique grâce à votre navigateur Web. Je trouve l’interface sympathique et pratique, alors pourquoi ne pas en profiter ? Si votre navigateur ne se lance pas par défaut, vous pouvez recopier l’adresse web que vous renvoie la console.

 

Interface de base de VueJs Cli UiLe système affiche la liste de vos projets. Vous pouvez créer ou importer un projet Vue ; pour ma part, je n’en ai pas encore. Nous allons donc cliquer sur Créer.

 

Indiquer l'endroit de création du projet VueJs

 

VueJS est sympa et vous demande dans quel emplacement vous souhaitez créer votre dossier. Pour ma part, je vais rester sur mon www. Il vous suffit ensuite de cliquer sur le bouton Créer un nouveau projet ici. Une nouvelle fenêtre se charge :

 

Détails du nouveau projet VueJs

 

Parcourons les éléments un par un :

  • Dossier du projet : il faut lui donner un nom.
  • Gestionnaire de paquets : je vous conseille npm car il fonctionne de base avec NodeJs.
  • Écraser le dossier s’il existe : je l’ai activé dans le cadre de mon exemple, mais il faut faire attention de ne pas supprimer un vrai projet existant.
  • Dépôt Git : je vous recommande de cocher cette case. De toute façon, vous serez obligé d’initialiser Git pour pouvoir versionner votre projet.

Après avoir cliqué sur le bouton Suivant, voilà que l’assistant vous propose de choisir un preset.

 

Preset VueJs

 

Trois possibilités s’offrent à vous :

  • Le Preset par défaut qui fonctionne très bien pour les débutants (je vous le recommande).
  • Le mode Manuel pour les curieux ou les personnes avancées, vous aurez accès à Fonctionnalités et à Configuration.
  • Le mode Preset distant pour charger un preset depuis un projet Git.

Pour finir, vous devez cliquer sur le bouton Créer le projet.

Au même moment, la partie console s’active et lance de belles commandes en arrière-plan :

 

Création et lancement d'un projet VueJS UI

 

Les commandes pour lancer votre serveur sont même indiquées ! Vous n’avez donc plus qu’à lancer les commandes suivantes :

 

cd hello-vue-world
npm run serve

 

Ainsi, NodeJs va démarrer votre serveur et vous indiquer les adresses web pour atteindre votre serveur par l’intermédiaire de votre navigateur favori.

 

Lancement du serveur VueJs

 

Quand vous taperez l’adresse, vous verrez cette magnifique page :

 

Premier page Hello World VueJs

 

Ce qui conclut notre premier article, mais ne vous inquiétez pas… il y en aura plein d’autres.

A bientôt pour de nouvelles aventures sur VueJS !

 

Vous pourriez aussi aimer

2 commentaires

Francis 20 mai 2019 - 12 h 29 min

Bonjour Mr Jérémie ! J’ai trouver votre Tuto sur vuejs très bien et je suis bien content d’en lire d’autres Tuto sur vuejs de votre part , d’abord je suis un débutant sur vuejs et j’aimerais bien comprend ce framework JavaScript pour fait des site avec .Mercie à bientôt !

Répondre
Jérémy PASTOURET 16 juin 2019 - 20 h 42 min

Bonjour,
je suis content que ce tuto vous ait plu.
On apprécie beaucoup votre commentaire encourageant.
Je vais essayer de prévoir des nouveaux articles sur VueJS.
A très bientôt.

Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.