Installazione di Bootstrap in Vue.js

In questa lezione effettueremo l’installazione di Bootstrap in Vue.js.

Ricordiamo che Bootstrap è un framework front-end open source utilizzato per la progettazione e lo sviluppo di interfacce utente responsive e moderne per siti web e applicazioni web. Questo potente framework offre una vasta gamma di componenti UI predefiniti, come bottoni, form, navbar, cards e molto altro, che possono essere facilmente integrati nelle applicazioni web. Inoltre, fornisce una griglia responsiva basata su un sistema di griglia flessibile che consente di creare layout flessibili e adattabili a diverse dimensioni di schermo e dispositivi.

Installazione di Bootstrap in Vue.js – CDN

Possiamo integrare Bootstrap tramite la CDN (Content Delivery Network) in un progetto Vue.js, seguendo questi passaggi:

Aprire il file public/index.html del progetto Vue.js
Aggiungere il tag <link> per collegare il foglio di stile CSS di Bootstrap.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vue Bootstrap Project</title>
  <!-- Aggiungi il foglio di stile di Bootstrap tramite la CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <!-- Collegamento ai file JavaScript di Bootstrap tramite CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In alternativa possiamo includere i file in main.js.

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Installazione di Bootstrap in Vue.js – npm

Possiamo installare Bootstrap entrando nella directory del progetto:

npm install bootstrap

Quando si esegue questo comando npm install bootstrap nel nostro progetto Vue.js, si sta utilizzando npm (Node Package Manager) per installare Bootstrap come dipendenza del progetto. Ecco cosa succede dietro le quinte:

Download dei pacchetti: npm scarica il pacchetto Bootstrap dal registry npm, che contiene tutte le risorse e i file necessari per utilizzare Bootstrap nel tuo progetto.
Installazione dei file: Una volta scaricato, npm installa il pacchetto Bootstrap nella directory node_modules del tuo progetto Vue.js. All’interno della directory node_modules/bootstrap, troveremo i file CSS, JavaScript e altre risorse di Bootstrap.
Aggiornamento del file package.json: npm aggiorna automaticamente il file package.json del nostro progetto per includere Bootstrap come dipendenza. Troveremo una voce simile a "bootstrap": "^x.x.x" all’interno della sezione "dependencies" del file package.json, dove "^x.x.x" rappresenta la versione specifica di Bootstrap che avete installato.
Gestione delle dipendenze: npm si occupa anche di risolvere le dipendenze di Bootstrap e di installare eventuali altre dipendenze necessarie per il corretto funzionamento di Bootstrap. Ad esempio, potrebbe installare dipendenze come popper.js, richieste da Bootstrap per alcune funzionalità come dropdown e tooltip.

Talvolta può essere necessario correggere automaticamente le vulnerabilità segnalate da npm audit. Il comando npm audit fix tenterà di risolvere le vulnerabilità in modo sicuro aggiornando le versioni delle dipendenze coinvolte.

npm audit fix

Oppure

npm audit fix --force

L’opzione --force indica a npm di applicare automaticamente le correzioni, anche se ciò comporta la modifica diretta dei file package-lock.json o npm-shrinkwrap.json, ignorando eventuali warning.

Ma attenzione, entrmabi i comandi potrebbero non risolvere tutte le vulnerabilità in modo sicuro e potrebbero causare problemi di compatibilità o di stabilità nel progetto, specialmente se si tratta di dipendenze cruciali. Perciò, è consigliabile valutare attentamente le correzioni proposte da npm audit e risolverle manualmente o utilizzare altre strategie per affrontare le vulnerabilità in modo sicuro.

Installazione di Bootstrap in Vue.js – inclusione dei file

Dopo aver installato Bootstrap utilizzando npm install bootstrap, si possono includere i file CSS e JavaScript di Bootstrap andando nel file main.js:

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// Includi il file CSS e JavaScript di Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

createApp(App).mount('#app')

Creare un progetto con Bootstrap in Vue.js

Adesso che abbiamo installato Bootstrap e incluso i file nel file main.js possiamo creare i componenti.

Innanzitutto creiamo un componente Header.vue utilizzando le classi di Bootstrap:

<!-- Header.vue -->
<template>
  <header class="navbar navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">My Website</a>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header'
}
</script>

Dopo creiamo anche un componente per la sezione hero:

<!-- Hero.vue -->
<template>
  <section class="hero">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h1>Benvenuti nel mio sito web</h1>
          <p>Questo sito web integra Bootstrap</p>
          <button class="btn btn-primary">More</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Hero'
}
</script>

<style scoped>
/* Stili specifici per la sezione hero */
</style>

Quindi inseriamo i componenti in App.vue:

<template>
  <div>
    <Header />
    <Hero />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Hero from './components/Hero.vue'

export default {
  name: 'App',
  components: {
    Header,
    Hero
  }
}
</script>