L’objectif de cet article est de présenter un retour d’expérience d’une première utilisation de Vue.js.

Description de l’application

L’application contient deux pages :

  • Une page d’affichage de tous les événements dans un tableau.
  • Une page d’édition d’un événement donné.

Pour le développement de l’application, j’ai développé 3 composants :

  • un composant EventList d’affichage d’une liste d’événements sous forme tabulaire
  • un composant Event d’affichage d’un événement
  • un composant EventBadge d’affichage du statut d’un événement

J’ai intégré bootstrap pour le style CSS, le routeur par défaut du Vue.js (pour le routage entre les pages) et axios pour les requêtes Ajax.

Composant

Structure d’un composant

Vue.js propose de structurer le code d’un composant dans un unique fichier (suffixé .vue).

<template>
# code HTML
</template>

<script>
# code JS
</script>

<style>
# code CSS
</style>

Ceci permet de colocaliser le code HTML/JS/CSS d’un composant dans un fichier unique. Pour ma part, j’ai préféré conserver le code HTML/JS/CSS dans des fichiers dédiés et les importer dans les composants Vue (cf. attribut src).

<template src='./Event.html'>

</template>

<script src='./Event.js'>

</script>

<style scoped>

</style>

Structure JS d’un composant

Le fragment JS du composant contient

  • des attributs (exemple : name -> nom du composant)
  • des méthodes (exemple : la méthode created est appelée à la création du composant)
export default {
  name: 'EventList',
  data() {
    return {
      items: []
    }
  },
  created() {
    // appel ajax
    axios.get(eventURL).then(response => { this.items = response.data; });
  }
}

Initialisation des données d’un composant

Le composant EventList est responsable de télécharger tous les événements avant de les afficher.

  • la fonction ‘data’ du composant contient les données du composant
  • la fonction ‘created’ est exécutée à la création du composant (téléchargement des événements et stockage dans data)
export default {
  name: 'EventList',
  data() {
    return {
      items: []
    }
  },
  created() {
    // appel ajax
    axios.get(eventURL).then(response => { this.items = response.data; });
  }
}

Paramétrage d’un composant

Les composants Vue.js sont paramétrables via des props. Le composant ci-dessous à un props : le status.

export default {
  name: 'event-badge',
  props: ['status'],
  ...
}

A l’utilisation du composant, il faut valoriser les props.

<event-badge :status='props.item.status'></event-badge>

Intégration de composants externes

Intégration de Bootstrap

Pour intégrer Bootstrap dans le code, je me suis servi du projet Bootstrap + Vue. Le projet Bootstrap + Vue apporte des composants Vue.js pour chaque composant Bootstrap.

Exemple de barre de navigation avec Bootstrap + Vue.

<b-navbar toggleable type="light" variant="light">
    <b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
    <b-navbar-brand>EventMgr</b-navbar-brand>
    <b-collapse is-nav id="nav_text_collapse">
      <b-navbar-nav>
        <b-nav-item href="#/events">Home</b-nav-item>
        <b-nav-item href="#/events/1">Events</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
</b-navbar>

Comme décrit dans la documentation du projet, il suffit d’ajouter au projet les dépendances bootstrap-vue et bootstrap puis d’enregistrer le plugin BootstrapVue dans le composant “point d’entrée” (composant App.vue).

import BootstrapVue from 'bootstrap-vue'

// nécessaire pour webpack
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css

Vue.use(BootstrapVue);

Intégration d’un routeur

Le projet généré intègre le routeur par défaut de Vue.js.

Le routeur est paramétré par un ensemble de routes :

  • une route /events (pour afficher tous les événements)
  • une route paramétrée /events/:id par l’identifiant d’un événement (pour afficher l’événement)
export default new Router({
  routes: [
    {
      path: '/events/:id',
      name: 'Event',
      component: Event
    }, {
      path: '/events',
      name: 'EventList',
      component: EventList
    }
  ]
})

L’intégration du routeur se fait au niveau du composant App.vue (composant point d’entrée) par intégration du fragment HTML ci-dessous (dans le code HTML du composant).

 <router-view/>

Intégration d’un client HTTP

En suivant le tutorial alligator.io, j’ai intégré le client axios.

Le Projet

Les sources du projet sont disponibles sur github.

J’ai utilisé JSON Server pour mettre en place rapidement une API de gestion d’événements. La base de données JSON est disponible sur github.

Génération du projet

Pour générer la structure du projet, j’ai utilisé vue-cli.

Compilation du projet

La compilation du projet est géré par webpack.

Compilation Live Reload

La compilation à chaud se fait en exécutant la ligne de commande suivante : webpack publie les sources du projet (via un serveur http local) sur http://localhost:8080

npm run dev

Génération des fichiers statiques

La génération des fichiers HTML/JS/CSS se fait en exécutant la ligne de commande suivante :

npm run build