Installation et configuration

Avantages du CLI Vue

L'outil CLI de Vue.js repose sur Webpack pour créer un environnement de développement optimisé. Il offre :

• Compilation des fichiers directement dans l'environnement plutôt que dans le navigateur
• Utilisation native de la syntaxe ES6+
• Minification et regroupement des scripts en un seul fichier
• Rechargement automatique des modules durant le développement

Prérequis système

• Node.js version 6.9 ou supérieure
• npm version 3.10 ou supérieure

Commandes d'initialisation

npm install -g @vue/cli
vue create mon-projet
cd mon-projet
npm run serve

Structure de composant

Exemple de composant simple

<template>
  <div class="application">
    <h1>{{ titre }}</h1>
  </div>
</template>

<script>
export default {
  designation: 'Application',
  donnees() {
    return { titre: 'Bienvenue dans Vue.js' }
  }
}
</script>

<style local>
.application {
  font-family: sans-serif;
}
</style>

Enregistrement des composants

Inscription globale

import Utilisateurs from './composants/Utilisateurs'
Vue.component('utilisateurs', Utilisateurs)

Enscription locale

import Utilisateurs from './composants/Utilisateurs'

export default {
  composants: { utilisateurs: Utilisateurs }
}

Propriétés et communication

Transmission de données parent-enfant

<!-- Parent -->
<utilisateurs :utilisateurs="liste"></utilisateurs>

<script>
export default {
  donnees() {
    return {
      liste: [
        { nom: "Pierre", role: "Développeur" },
        { nom: "Marie", role: "Designer" }
      ]
    }
  }
}
</script>

<!-- Composant enfant -->
<script>
export default {
  proprietes: {
    utilisateurs: {
      type: Array,
      requis: true
    }
  }
}
</script>

Gestion des événements

<!-- Composant émetteur -->
<template>
  <div @click="propagerModification">
    {{ texte }}
  </div>
</template>

<script>
export default {
  methodes: {
    propagerModification() {
      this.$emit("modificationTitre", "Nouveau titre")
    }
  }
}
</script>

<!-- Composant récepteur -->
<template>
  <composant-emetteur @modificationTitre="modifierTitre($event)"></composant-emetteur>
</template>

Gestionnaire d'état avec Vuex

Structure de base du store

const magasin = new Vuex.Store({
  etat: {
    produits: [
      { designation: "Ordinateur", prix: 1200 },
      { designation: "Smartphone", prix: 800 }
    ]
  },
  mutations: {
    reduirePrix: etat => {
      etat.produits.forEach(p => p.prix -= 100)
    }
  },
  actions: {
    appliquerReduction: (contexte, valeur) => {
      setTimeout(() => {
        contexte.commit('reduirePrix', valeur)
      }, 2000)
    }
  },
  getters: {
    produitsPromo: etat => {
      return etat.produits.filter(p => p.prix < 1000)
    }
  }
})

Utilisation dans les composants

export default {
  calcule: {
    articles() {
      return this.$store.etat.produits
    },
    ...Vuex.mapGetters(['produitsPromo'])
  },
  methodes: {
    ...Vuex.mapActions(['appliquerReduction'])
  }
}

Routage avancé

Configuration des routes

const itineraire = new VueRouter({
  mode: 'histoire',
  routes: [
    { chemin: '/', composant: Accueil },
    { chemin: '/a-propos', composant: APropos },
    { chemin: '*', redirect: '/' }
  ]
})

Navigation programmable

methodes: {
  naviguer() {
    this.$routeur.push({ nom: 'accueilLien' })
    this.$routeur.replace('/menu')
  }
}

Requêtes réseau

Exemple avec Axios

import axios from 'axios'

export default {
  cree: function() {
    axios.post('/api/utilisateurs', { credential })
      .then(reponse => console.log(reponse.donnees))
  }
}

Optimisation du cycle de vie

• beforeCreate: pré-initialisation du composant
• created: liaison des propriétés terminée
• mounted: insertion dans le DOM complète
• updated: mise à jour du composant appliquée
• beforeDestroy: pré-destruction du composant