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

Il progetto [vuejs-02] illustra l’utilizzo di Bootstrap in un progetto [vue.js]. Il framework CSS sarà utilizzato in tutti i nostri progetti. Utilizzeremo una variante di Bootstrap denominata [BootstrapVue] [https://bootstrap-vue.js.org/].

La struttura del progetto sarà la seguente:

Nota: nella parte precedente, la cartella [vuejs] è stata rinominata [cours] [1] nel prosieguo del documento.

4.1. Installazione del framework [BootstrapVue]

[BootstrapVue] è un framework che viene aggiunto al progetto tramite lo strumento [npm]:

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

4.2. Lo script [main.js]

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


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

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

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

// configurazione
Vue.config.productionTip = false

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

riga 2: importazione del framework [Vue];
riga 3: importazione della vista principale;
riga 6: importazione del framework [BootstrapVue];
riga 7: questo framework è concepito come un plugin del framework [Vue]. La riga 7 include questo plugin nel framework [Vue];
righe 10-11: importazione dei 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 quanto visto nel paragrafo precedente;

4.3. Il componente [App.vue]


<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- riga -->
        <b-row>
          <!-- colonna di larghezza 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- colonna di larghezza 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, sarà possibile definire righe con il tag <b-row> e colonne con il tag <b-col>;
righe 3, 19: il tag <b-card> definisce una «scheda» Bootstrap. Visivamente si presenta come un rettangolo con un bordo;
righe 5, 17: il tag <b-jumbotron> permette di mettere in evidenza una parte della pagina, in questo caso un'immagine e un testo. Lo useremo nei nostri vari progetti come identificazione visiva del progetto;
riga 7: il tag <b-row> definisce una riga;
righe 9-11: il tag <b-col> definisce una colonna della riga precedente. Bootstrap assegna 12 colonne a ogni 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. Vi si inserisce un testo;
riga 18: utilizzo di un componente denominato [HelloBootstrap] con una proprietà denominata [msg];
righe 24-33: la parte <script> del componente;
righe 29-31: il componente [HelloBootstrap] utilizzato alla riga 18 viene esportato. Per essere riconosciuto, deve essere importato alla riga 25;

Il risultato è il seguente:

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

4.4. Il componente [HelloBootstrap]

[HelloBootstrap] è il componente seguente:


<template>
  <div>
    <!-- messaggio su sfondo verde -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- messaggio su sfondo giallo -->
    <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 in cui solitamente viene inserito un 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 della variante [success] è il verde. L'attributo [align] consente di allineare il testo dell'avviso (a sinistra, a destra, al centro). Si noti che l’attributo [show] è obbligatorio per visualizzare l’avviso. Senza questo attributo, l’avviso non è visibile;
i valori possibili di [variant]:
- [primary]: blu;
- [secondary]: grigio;
- [success]: verde;
- [danger]: rosso chiaro;
- [warning]: giallo;
- [info]: turchese;
- [light]: senza 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, occorre innanzitutto modificare il file [package.json]:

in [3], si modifica lo script eseguito dal comando [serve] [2] del file package.json [1] ;
in [4], si esegue il progetto;

Nota: in tutto ciò che segue si utilizzeranno i tag del framework BootstrapVue, ovvero tag della forma <b-qualcosa>. Ciò non è obbligatorio. È possibile utilizzare i tag originali del framework Bootstrap. Sono funzionanti nei template di [Vue.js]. Pertanto, lo sviluppatore abituato ai tag Bootstrap può continuare a utilizzarli.