Introduction au framework VUE.JS par l'exemple

[BootstrapVue] est un framework qu’on ajoute au projet avec l’outil [npm] :

• en [1], c’est donc deux frameworks qu’on installe : [Bootstrap] et sa variante [BootstrapVue] ;
• en [2], les deux dépendances apparaissent dans le fichier [package.json] ;

Le script principal [main.js] est le suivant :

// imports
import Vue from 'vue'
import App from './App.vue'

// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// configuration
Vue.config.productionTip = false

// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

• ligne 2 : import du framework [Vue] ;
• ligne 3 : import de la vue principale ;
• ligne 6 : import du framework [BootstrapVue] ;
• ligne 7 : ce framework est conçu comme un plugin du framework [Vue]. La ligne 7 inclut ce plugin dans le framework [Vue] ;
• lignes 10-11 : import des fichiers CSS des frameworks [Bootstrap] et [BootstrapVue] ;
• les lignes 5-11 sont donc entièrement consacrées à l’utilisation de [BootstrapVue]. Le reste du code est identique à ce qu’on avait vu au paragraphe précédent ;

<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- ligne -->
        <b-row>
          <!-- colonne de largeur 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- colonne de largeur 8 -->
          <b-col cols="8">
            <h1>Calculez votre impôt</h1>
          </b-col>
        </b-row>
      </b-jumbotron>
      <HelloBootstrap msg="Hello Bootstrap !" />
    </b-card>
  </b-container>
</template>


<script>
  import HelloBootstrap from "./components/HelloBootstrap.vue";

  export default {
    name: "app",
    components: {
      HelloBootstrap
    }
  };
</script>

Commentaires

• lignes 1-21 : toutes les balises <b-xx> sont des balises du framework [BootstrapVue] ;
• lignes 2, 20 : la balise <b-container> définit un conteneur Bootstrap. A l’intérieur de ce conteneur, on va pouvoir définir des lignes avec la balise <b-row> et des colonnes avec la balise <b-col> ;
• lignes 3, 19 : la balise <b-card> définit une ‘carte’ Bootstrap. Cela se matérialise visuellement par un rectangle avec une bordure ;
• lignes 5, 17 : la balise <b-jumbotron> permet de mettre en avant une partie de la page, ici une image et un texte. On l’utilisera dans nos divers projets comme identification visuelle du projet ;
• ligne 7 : la balise <b-row> définit une ligne ;
• lignes 9-11 : la balise <b-col> définit une colonne de la ligne précédente. Bootstrap attribue 12 colonnes à chaque ligne. L’attribut [cols=’4’] indique que la colonne <b-col> va occuper 4 de ces 12 colonnes ;
• ligne 10 : une image
• lignes 13-15 : une colonne qui va occuper 8 des 12 colonnes de la ligne. on y met un texte ;
• ligne 18 : utilisation d’un composant appelé [HelloBootstrap] avec une propriété nommée [msg] ;
• lignes 24-33 : la partie <script> du composant ;
• lignes 29-31 : le composant [HelloBootstrap] utilisée ligne 18 est exporté. Pour être connu, il doit être importé ligne 25 ;

Le résultat est le suivant :

• en [1], la balise <b-card> ;
• en [2], la balise <jumbotron> ;
• en [3], l’image sur 4 colonnes ;
• en [4], le texte sur 8 colonnes ;

[HelloBootstrap] est le composant suivant :

<template>
  <div>
    <!-- message sur fond vert -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- message sur fond jaune -->
    <b-col cols="12">
      <b-alert show variant="warning" align="center">
        <h4>{{msg}}</h4>
      </b-alert>
    </b-col>
  </div>
</template>

<script>
  export default {
    name: "HelloBootstrap",
    props: {
      msg: String
    }
  };
</script>

Commentaires

• ligne 3 : la balise <b-alert show> affiche un rectangle de couleur dans lequel on met en général un texte (ligne 6). L’attribut [variant] permet de sélectionner un type d’alerte. Chaque type d’alerte a une couleur de fond différente. La couleur de la variante [success] est le vert. L’attribut [align] permet d’aligner le texte de l’alerte (gauche, droite, centré). On notera que l’attribut [show] est obligatoire pour afficher l’alerte. Sans cet attribut, l’alerte n’est pas visible ;

• les valeurs possibles de [variant] :

  • [primary] : bleu ;
  • [secondary] : gris ;
  • [success]:vert ;
  • [danger] : rouge léger ;
  • [warning] : jaune ;
  • [info] : turquoise ;
  • [light] : pas de couleur de fond ;
  • [dark] : gris un peu plus foncé que [secondary] ;
• ligne 12 : [msg] est un paramètre du composant [HelloBootstrap] (lignes 21-23) ;

Le rendu visuel est le suivant :

• [1] : balise <b-alert show variant=’success’> ;
• [2] : balise <b-alert show variant=’warning’> ;

Pour exécuter le projet, on modifie d’abord le fichier [package.json] :

• en [3], on modifie le script exécuté par la commande [serve] [2] du fichier package.json [1] ;
• en [4], on exécute le projet ;

Note : dans tout ce qui suit on utilisera les balises du framework BootstrapVue, des balises de la forme <b-qqchose>. Ce n’est pas obligatoire. On peut utiliser les balises originelles du framework Bootstrap. Elles sont fonctionnelles dans les templates de [Vue.js]. Aussi le développeur habitué aux balises Bootstrap peut continuer à les utiliser.