4. Progetto [vuejs-02]: Utilizzo del framework CSS Bootstrap

Il progetto [vuejs-02] mostra come usare Bootstrap in un progetto [Vue.js]. Questo è il framework CSS che useremo in tutti i nostri progetti. Useremo una variante di Bootstrap chiamata [BootstrapVue] [https://bootstrap-vue.js.org/].

La struttura delle directory del progetto sarà la seguente:

Nota: nel documento sottostante, la cartella [vuejs] è stata rinominata [cours] [1].

4.1. Installazione del framework [BootstrapVue]

[BootstrapVue] è un framework che aggiungiamo al progetto utilizzando lo strumento [npm]:

In [1], stiamo quindi installando due framework: [Bootstrap] e la sua variante [BootstrapVue];
in [2], entrambe le dipendenze compaiono nel file [package.json];

4.2. Lo script [main.js]

Lo script principale [main.js] è il seguente:


// 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')

riga 2: importa il framework [Vue];
riga 3: importare la vista principale;
riga 6: importare il framework [BootstrapVue];
riga 7: questo framework è progettato come plugin per il framework [Vue]. La riga 7 include questo plugin nel framework [Vue];
righe 10–11: importare i file CSS dai framework [Bootstrap] e [BootstrapVue];
Le righe 5–11 sono quindi interamente dedicate all'utilizzo di [BootstrapVue]. Il resto del codice è identico a quello che abbiamo visto nel paragrafo precedente;

4.3. Il componente [App.vue]


<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>

Commenti

righe 1–21: tutti i tag <b-xx> sono tag del framework [BootstrapVue];
righe 2, 20: il tag <b-container> definisce un contenitore Bootstrap. All'interno di questo contenitore, possiamo definire righe utilizzando il tag <b-row> e colonne utilizzando il tag <b-col>;
righe 3, 19: il tag <b-card> definisce una “scheda” Bootstrap. Visivamente, questa appare come un rettangolo con un bordo;
righe 5, 17: il tag <b-jumbotron> consente di evidenziare una sezione della pagina, in questo caso un'immagine e del testo. Lo useremo nei nostri vari progetti come identificatore visivo del progetto;
riga 7: il tag <b-row> definisce una riga;
righe 9–11: il tag <b-col> definisce una colonna nella riga precedente. Bootstrap assegna 12 colonne a ciascuna riga. L'attributo [cols=’4’] indica che la colonna <b-col> occuperà 4 di queste 12 colonne;
Riga 10: un'immagine
righe 13–15: una colonna che occuperà 8 delle 12 colonne della riga. Inseriamo del testo in quel punto;
riga 18: utilizzo di un componente chiamato [HelloBootstrap] con una proprietà denominata [msg];
righe 24–33: la parte <script> del componente;
righe 29–31: il componente [HelloBootstrap] utilizzato nella riga 18 viene esportato. Per essere riconosciuto, deve essere importato nella riga 25;

Il risultato è il seguente:

in [1], il tag <b-card>;
in [2], il tag <jumbotron>;
in [3], l'immagine a 4 colonne;
in [4], il testo a 8 colonne;

4.4. Il [HelloBootstrap]

[HelloBootstrap] è il seguente componente:


<template>
  <div>
    <!-- message on green background -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- message on yellow background -->
    <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>

Commenti

riga 3: il tag <b-alert show> visualizza un rettangolo colorato che in genere contiene del testo (riga 6). L'attributo [variant] consente di selezionare un tipo di avviso. Ogni tipo di avviso ha un colore di sfondo diverso. Il colore per la variante [success] è il verde. L'attributo [align] consente di allineare il testo dell'avviso (a sinistra, a destra o al centro). Si noti che l'attributo [show] è necessario per visualizzare l'avviso. Senza questo attributo, l'avviso non è visibile;
Valori possibili per [variant]:
- [primary]: blu;
- [secondary]: grigio;
- [success]: verde;
- [danger]: rosso chiaro;
- [avviso]: giallo;
- [info]: turchese;
- [luce]: nessun colore di sfondo;
- [dark]: grigio leggermente più scuro di [secondary];
riga 12: [msg] è un parametro del componente [HelloBootstrap] (righe 21–23);

Il risultato visivo è il seguente:

[1]: tag <b-alert show variant='success'>;
[2]: tag <b-alert show variant='warning'>;

4.5. Esecuzione del progetto

Per eseguire il progetto, modificare innanzitutto il file [package.json]:

in [3], modificare lo script eseguito dal comando [serve] [2] nel file package.json [1];
in [4], eseguire il progetto;

Nota: Di seguito utilizzeremo i tag del framework BootstrapVue, che hanno la forma <b-qualcosa>. Questo non è obbligatorio. È possibile utilizzare i tag del framework Bootstrap originale. Funzionano nei modelli [Vue.js]. Pertanto, gli sviluppatori abituati ai tag Bootstrap possono continuare a utilizzarli.