Bootstrap & Vite

Ametlik juhend Bootstrapi CSS-i ja JavaScripti kaasamiseks ja komplekteerimiseks oma projekti Vite abil.

Sellel lehel

Kas soovite lõpuni vahele jätta? Laadige twbs/examples hoidlast alla selle juhendi lähtekood ja töötav demo . Näite saate avada ka StackBlitzis reaalajas redigeerimiseks.

Seadistamine

Ehitame Vite projekti koos Bootstrapiga nullist üles, nii et enne, kui saame päriselt alustada, on mõned eeltingimused ja sammud. See juhend nõuab, et teil oleks installitud Node.js ja tunneksite terminali teatud määral.

Looge projekti kaust ja seadistage npm. Loome my-projectkausta ja initsialiseerime npm -yargumendiga, et see ei esitaks meile kõiki interaktiivseid küsimusi.
```
mkdir my-project && cd my-project
npm init -y
```
Installige Vite. Erinevalt meie veebipaketi juhendist on siin ainult üks ehitustööriistade sõltuvus. Me kasutame --save-devmärku, et see sõltuvus on mõeldud ainult arendustegevuseks, mitte tootmiseks.
```
npm i --save-dev vite
```
Installige Bootstrap. Nüüd saame installida Bootstrapi. Installime ka Popperi, kuna meie rippmenüüd, hüpikaknad ja tööriistaspikrid sõltuvad sellest oma asukoha määramisel. Kui te ei kavatse neid komponente kasutada, võite Popperi siit välja jätta.
```
npm i --save bootstrap @popperjs/core
```
Installige täiendav sõltuvus. Lisaks Vitele ja Bootstrapile vajame Bootstrapi CSS-i korrektseks importimiseks ja komplekteerimiseks veel üht sõltuvust (Sass).
```
npm i --save-dev sass
```

Nüüd, kui meil on kõik vajalikud sõltuvused installitud ja seadistatud, saame alustada projektifailide loomise ja Bootstrapi importimisega.

Projekti struktuur

Oleme my-projectkausta juba loonud ja npm initsialiseerinud. Nüüd loome srcprojekti struktuuri ümardamiseks ka kausta, laaditabeli ja JavaScripti faili. Käivitage alljärgnev my-projectvõi looge käsitsi allpool näidatud kausta- ja failistruktuur.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

Kui olete lõpetanud, peaks teie kogu projekt välja nägema järgmine:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

Praegu on kõik õiges kohas, kuid Vite ei tööta, sest me pole oma täitnudvite.config.js veel oma täitnud.

Seadistage Vite

Kui sõltuvused on installitud ja meie projektikaust on kodeerimise alustamiseks valmis, saame nüüd Vite konfigureerida ja oma projekti kohapeal käivitada.

Ava vite.config.jsoma redaktoris. Kuna see on tühi, peame serveri käivitamiseks lisama sellele mõne katla konfiguratsiooni. See konfiguratsiooni osa ütleb, et Vite peab otsima meie projekti JavaScripti ja seda, kuidas arendusserver peaks käituma (kuumlaadimisega srckaustast tõmbamine).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Järgmisena täidame src/index.html. See on HTML-leht, mille Vite laadib brauserisse, et kasutada komplekteeritud CSS-i ja JS-i, mille lisame sellele hilisemates sammudes.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

Lisame siia veidi Bootstrapi stiili koos jaga div class="container", <button>et näeksime, millal Vite laadib Bootstrapi CSS-i.

Nüüd vajame Vite käivitamiseks npm-skripti. Avage package.jsonja lisage startallpool näidatud skript (teil peaks testskript juba olemas olema). Kasutame seda skripti kohaliku Vite dev serveri käivitamiseks.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ja lõpuks saame Vite käima panna. Käivitage oma terminali my-projectkaustas äsja lisatud npm-skript:
```
npm start
```

Selle juhendi järgmises ja viimases jaotises impordime kogu Bootstrapi CSS-i ja JavaScripti.

Impordi Bootstrap

Bootstrapi Sassi importimise seadistamine vite.config.js. Teie konfiguratsioonifail on nüüd valmis ja peaks vastama allolevale väljavõttele. Ainus uus osa siin on resolvejaotis – me kasutame seda oma lähtefailidele varjunime lisamiseks, node_moduleset importimine oleks võimalikult lihtne.

const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}

Nüüd impordime Bootstrapi CSS-i. src/scss/styles.scssKogu Bootstrapi allika Sassi importimiseks lisage järgmine .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Soovi korral saate meie laaditabeleid ka eraldi importida. Lisateavet leiate meie Sassi impordi dokumentidest .
Järgmisena laadime CSS-i ja impordime Bootstrapi JavaScripti. Lisage src/js/main.jsCSS-i laadimiseks ja kogu Bootstrapi JS-i importimiseks järgmine. Popper imporditakse automaatselt Bootstrapi kaudu.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Vajadusel saate JavaScripti pistikprogramme ka ükshaaval importida, et kimpude suurust vähendada.
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bootstrapi pistikprogrammide kasutamise kohta lisateabe saamiseks lugege meie JavaScripti dokumente .
Ja ongi valmis! 🎉 Kui Bootstrapi allikas Sass ja JS on täielikult laetud, peaks teie kohalik arendusserver nüüd välja nägema selline.

Nüüd saate hakata lisama mis tahes Bootstrapi komponente, mida soovite kasutada. Vaadake kindlasti täielikku Vite näidisprojekti selle kohta, kuidas lisada täiendavat kohandatud Sassi ja optimeerida oma ehitust, importides ainult need Bootstrapi CSS-i ja JS-i osad, mida vajate.

Kas näete siin midagi valesti või aegunud? Avage probleem GitHubis . Kas vajate veaotsingul abi? Otsige või alustage arutelu GitHubis.