IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Introduction au framework VUE.JS par l'exemple


précédentsommairesuivant

V. projet [vuejs-02] : utilisation du framework CSS Bootstrap

Le projet [vuejs-02] présente l’utilisation de Bootstrap dans un projet [vue.js]. C’est le framework CSS qui sera utilisé dans tous nos projets. Nous utiliserons une variation de Bootstrap appelée [BootstrapVue] [https://bootstrap-vue.js.org/].

L’arborescence du projet sera la suivante :

Image non disponible

Note : ci-dessus le dossier [vuejs] a été renommée [cours] [1] dans la suite du document.

V-A. Installation du framework [BootstrapVue]

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

Image non disponible
  • 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] ;

V-B. Le script [main.js]

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
// 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 ;

V-C. Le composant [App.vue]

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<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 :

Image non disponible
  • 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 ;

V-D. Le composant [HelloBootstrap]

[HelloBootstrap] est le composant suivant :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
<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 :

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

V-E. Exécution du projet

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

Image non disponible
  • 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.


précédentsommairesuivant

Licence Creative Commons
Le contenu de cet article est rédigé par Serge Tahé et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2019 Developpez.com.