Comment créer sa première application avec Vue.JS

Installation de Node.Js

Pour créer sa première application avec Vue.Js il faut tout d’abord procéder à installer Node.js si celui-ci n’est pas déjà installé. Node.Js est un environnement d’exécution JavaScript, c’est-à-dire un environnement où l'on peut exécuter du code JavaScript sans navigateur. 

Lien de téléchargement : https://nodejs.org

Il est recommandé d’effectuer une des commandes suivantes pour vérifier que Node.Js est bien installé :

npm -v  

ou 

npm –version

Si un numéro de version s'affiche, cela veut dire que Node.Js est bien installé sur le poste.

Installation de Vue CLI

Ensuite, il faut installer l’outil Vue CLI car il nous donne accès à plusieurs autres outils qui facilitent la création et la configuration de projets Vue sans avoir besoin d’effectuer une configuration spécifique.

Dans un terminal la commande pour installer Vue CLI est :

npm install -g @vue/cli

Pour verifier que Vue CLI est bien installé : 

vue --version

Création d’un projet Vue

Cela étant, il faut se placer dans le répertoire où on veut créer le projet et effectuer cette commande où <nom projet> est le nom du projet (au choix) :

vue create <nom projet>

Choisir l’option default avec les flèches directionnelles et, quand le projet a fini d'être généré, se déplacer vers le nouveau répertoire avec la commande :

cd <nom projet>

Ensuite, pour tester l'application Web il faut démarrer un serveur avec la commande ci-dessous :

npm run serve

Npm va alors exécuter la commande intitulée serve dans le fichier package.json qui dans ce cas-ci consiste à démarrer un serveur de développement.

L'étape suivante consiste à ouvrir un navigateur et à aller vers l'URL http://localhost:8080 qui va nous afficher le contenu par défaut du fichier App.vue.

Ajouter d’autres pages à l’application : 

Il est aussi possible d’ajouter d’autres pages Web dans une application créée avec Vue.Js en utilisant la bibliothèque vue-router qui permet d’associer des routes (qui sont des URLs) à des composantes vues. Pour ce faire, il faut être dans le répertoire principal du projet et lancer la commande suivante :

vue add router

Ensuite, on peut choisir les options d’historique voulues et créer un nouveau fichier .vue par exemple contact.vue qui va être le composant qu’on va placer dans le dossier src/views/ 

Fichier contact.vue :

<template>
 <div class="contact">
       <img alt="Our Logo" src="../assets/logo.png">
       <div id="contact">
           <h2>Contactez nous !</h2>
           <p>Contactez nous avec ces informations fictives 514-111-1222</p>
       </div>
       <footer>
   </footer></div>
</template>

<script>
export default {
   name: 'contactez-nous',

}
</script>
 

Finalement, on va devoir mettre à jour le fichier src/router/index.js pour indiquer quelle URL correspond a la composante du fichier contact.vue.

const routes = [
 {
   path: '/',
   name: 'home',
   component: HomeView
 },
 {
   path: '/about',
   name: 'about',
   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
 },
 {
     path: '/contact',
     name: 'contact',
     component: () => import('../views/contact.vue')
   }
]

Au besoin, on pourrait aussi ajouter le lien de la composante /contact dans le fichier App.vue principal pour la navigation.

<nav>
  <router-link to="/">Home</router-link> |
 <router-link to="/about">About</router-link> | 
 <router-link to="/contact">Contact</router-link>

</nav>

Références

Diego GONGORA, « How to Create a Vue Project from Scratch », Medium, https://medium.com/@dgongoragamboa/how-to-create-a-vue-project-from-scratch-520dcc293dd2 (Page consultée le 23 février)

« Creating your first Vue App », fjolt, https://fjolt.com/article/vue-create-your-first-app (Page consultée le 23 février)