NOTE: Cette page survole le framework Vue.js, toutefois cela peut vous montrer la différence entre JavaScript classique et Vue.js. J’utilise Vue.js en géomatique car elle est très facile à utiliser et elle dispose de beaucoup d’extensions pour développer des applications spatiales (ex: leaflet, openlayers, …).

Introduction à Vue.js 3

Cette page vous permet de découvrir les bases de Vue.js 3 qui est un framework JavaScript permettant la construction d’interfaces utilisateur interactives. Vue est facile à prendre en main et puissant pour créer des applications web modernes. On peut noter qu’il existe d’autres frameworks comme ReactJS (présent dans le MapStore de GeoNode) et Angular.

Vue.js change la manière de développer les applications en géomatique. Traditionnellement les outils WebGIS sont développés autour de jQuery et du JavaScript classique. Ce genre de frameworks oblige les développeurs à changer leurs habitudes. Toutefois c’est pour mettre en place des applications plus réactives. Il faut noter qu’il est important de disposer de :

  • Connaissances de base en HTML, CSS, et JavaScript
  • Node.js installé (version recommandée : ≥ 16)

Structure d’un projet

.
├── index.html           # Point d'entrée HTML
├── package.json         # Dépendances et scripts
├── vite.config.js       # Configuration Vite
└── src/
    ├── main.js          # Démarrage de l'application Vue
    ├── App.vue          # Composant principal
    └── components/
        └── HelloWorld.vue  # Exemple de composant

Comme un projet Vue.js est basé sur node.js, il y aura la présence d’un fichier package.json listant les librairies à utiliser dans le projet.

En général, le projet va comprendre des composants réutilisables avec une structure particulière (comprenant du script, un agencement HTML et un style).

Concepts de base

Créer une application Vue 3

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Template, Script, Style

Un fichier .vue est composé de 3 parties :

<template>
  <h1></h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Bonjour Vue 3 !'
    }
  }
}
</script>

<style>
h1 {
  color: teal;
}
</style>

Directives

  • v-if: afficher un élément si une condition est vraie
  • v-for: répéter un élément pour chaque item d’une liste
  • v-model: liaison bidirectionnelle avec un champ de formulaire
  • @click: gérer un clic utilisateur

Exemple :

<input v-model="name" placeholder="Votre nom">
<button @click="saluer">Dire bonjour</button>
<p v-if="name">Bonjour,  !</p>

Composants

Un composant est un bloc réutilisable avec ses propres données et comportements.

<!-- components/HelloWorld.vue -->
<template>
  <h2>Hello </h2>
</template>

<script>
export default {
  props: ['name']
}
</script>

Puis dans App.vue :

<HelloWorld name="Alice" />

Ressources utiles