4. Projekt [vuejs-02]: Verwendung des Bootstrap-CSS-Frameworks

Das Projekt [vuejs-02] demonstriert die Verwendung von Bootstrap in einem [Vue.js]-Projekt. Dies ist das CSS-Framework, das in allen unseren Projekten verwendet wird. Wir werden eine Variante von Bootstrap namens [BootstrapVue] [https://bootstrap-vue.js.org/] verwenden.

Die Verzeichnisstruktur des Projekts sieht wie folgt aus:

Hinweis: Im folgenden Dokument wurde der Ordner [vuejs] in [cours] umbenannt [1].

4.1. Installation des [BootstrapVue]-Frameworks

[BootstrapVue] ist ein Framework, das wir mit dem Tool [npm] zum Projekt hinzufügen:

In [1] installieren wir daher zwei Frameworks: [Bootstrap] und dessen Variante [BootstrapVue];
in [2] erscheinen beide Abhängigkeiten in der Datei [package.json];

4.2. Das Skript [main.js]

Das Hauptskript [main.js] sieht wie folgt aus:


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

Zeile 2: Importiere das [Vue]-Framework;
Zeile 3: Importiere die Hauptansicht;
Zeile 6: Importiere das [BootstrapVue]-Framework;
Zeile 7: Dieses Framework ist als Plugin für das [Vue]-Framework konzipiert. Zeile 7 bindet dieses Plugin in das [Vue]-Framework ein;
Zeilen 10–11: Importieren der CSS-Dateien aus den Frameworks [Bootstrap] und [BootstrapVue];
Die Zeilen 5–11 sind daher vollständig der Verwendung von [BootstrapVue] gewidmet. Der Rest des Codes ist identisch mit dem, was wir im vorherigen Absatz gesehen haben;

4.3. Die Komponente [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>

Kommentare

Zeilen 1–21: Alle <b-xx>-Tags sind Tags aus dem [BootstrapVue]-Framework;
Zeilen 2, 20: Das <b-container>-Tag definiert einen Bootstrap-Container. Innerhalb dieses Containers können wir mit dem <b-row>-Tag Zeilen und mit dem <b-col>-Tag Spalten definieren;
Zeilen 3, 19: Das <b-card>-Tag definiert eine Bootstrap-„Karte“. Optisch erscheint diese als Rechteck mit einem Rahmen;
Zeilen 5, 17: Mit dem <b-jumbotron>-Tag können Sie einen Abschnitt der Seite hervorheben, in diesem Fall ein Bild und etwas Text. Wir werden es in unseren verschiedenen Projekten als visuelles Erkennungsmerkmal für das Projekt verwenden;
Zeile 7: Das <b-row>-Tag definiert eine Zeile;
Zeilen 9–11: Das <b-col>-Tag definiert eine Spalte in der vorherigen Zeile. Bootstrap weist jeder Zeile 12 Spalten zu. Das Attribut [cols=’4’] gibt an, dass die <b-col>-Spalte 4 dieser 12 Spalten einnehmen wird;
Zeile 10: ein Bild
Zeilen 13–15: Eine Spalte, die 8 der 12 Spalten in der Zeile einnimmt. Wir fügen dort etwas Text ein;
Zeile 18: Verwendung einer Komponente namens [HelloBootstrap] mit einer Eigenschaft namens [msg];
Zeilen 24–33: der <script>-Teil der Komponente;
Zeilen 29–31: Die in Zeile 18 verwendete Komponente [HelloBootstrap] wird exportiert. Damit sie erkannt wird, muss sie in Zeile 25 importiert werden;

Das Ergebnis sieht wie folgt aus:

in [1] das <b-card>-Tag;
in [2] das <jumbotron>-Tag;
in [3] das 4-spaltige Bild;
in [4] der 8-spaltige Text;

4.4. Die [HelloBootstrap]

[HelloBootstrap] ist die folgende Komponente:


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

Kommentare

Zeile 3: Das Tag <b-alert show> zeigt ein farbiges Rechteck an, das in der Regel Text enthält (Zeile 6). Mit dem Attribut [variant] können Sie einen Alert-Typ auswählen. Jeder Alert-Typ hat eine andere Hintergrundfarbe. Die Farbe für die Variante [success] ist grün. Mit dem Attribut [align] können Sie den Alert-Text ausrichten (links, rechts oder zentriert). Beachten Sie, dass das Attribut [show] erforderlich ist, um die Benachrichtigung anzuzeigen. Ohne dieses Attribut ist die Benachrichtigung nicht sichtbar;
Mögliche Werte für [variant]:
- [primary]: blau;
- [secondary]: grau;
- [success]: grün;
- [danger]: hellrot;
- [Warnung]: gelb;
- [Info]: türkis;
- [light]: keine Hintergrundfarbe;
- [dark]: Grau, etwas dunkler als [secondary];
Zeile 12: [msg] ist ein Parameter der Komponente [HelloBootstrap] (Zeilen 21–23);

Die visuelle Ausgabe sieht wie folgt aus:

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

4.5. Ausführen des Projekts

Um das Projekt auszuführen, ändern Sie zunächst die Datei [package.json]:

Ändern Sie in [3] das Skript, das vom Befehl [serve] [2] in der Datei package.json [1] ausgeführt wird;
Führen Sie in [4] das Projekt aus;

Hinweis: Im Folgenden verwenden wir Tags des BootstrapVue-Frameworks, die die Form <b-something> haben. Dies ist nicht zwingend erforderlich. Sie können die ursprünglichen Tags des Bootstrap-Frameworks verwenden. Diese funktionieren in [Vue.js]-Vorlagen. Daher können Entwickler, die an Bootstrap-Tags gewöhnt sind, diese weiterhin verwenden.