Bootstrap & Vite

Uradni vodnik za vključitev in povezovanje Bootstrapovega CSS in JavaScripta v vaš projekt z uporabo Vite.

Na tej strani

Želite preskočiti na konec? Prenesite izvorno kodo in delujočo predstavitev za ta vodnik iz repozitorija twbs/examples . Primer lahko odprete tudi v StackBlitzu za urejanje v živo.

Nastaviti

Projekt Vite z Bootstrapom gradimo od začetka, tako da obstaja nekaj predpogojev in začetnih korakov, preden lahko zares začnemo. Ta priročnik zahteva, da imate nameščen Node.js in nekaj znanja o terminalu.

Ustvarite mapo projekta in nastavite npm. Ustvarili bomo my-projectmapo in inicializirali npm z -yargumentom, da se izognemo postavljanju vseh interaktivnih vprašanj.
```
mkdir my-project && cd my-project
npm init -y
```
Namestite Vite. Za razliko od našega vodnika Webpack je tukaj samo ena odvisnost orodja za gradnjo. Uporabljamo --save-devza sporočanje, da je ta odvisnost samo za razvojno uporabo in ne za proizvodnjo.
```
npm i --save-dev vite
```
Namestite Bootstrap. Zdaj lahko namestimo Bootstrap. Namestili bomo tudi Popper, saj so naši spustni meniji, pojavna okna in opisi orodij odvisni od tega za njihovo pozicioniranje. Če teh komponent ne nameravate uporabljati, lahko Popperja tukaj izpustite.
```
npm i --save bootstrap @popperjs/core
```
Namestite dodatno odvisnost. Poleg Vite in Bootstrap potrebujemo še eno odvisnost (Sass), da pravilno uvozimo in združimo Bootstrapov CSS.
```
npm i --save-dev sass
```

Zdaj, ko imamo nameščene in nastavljene vse potrebne odvisnosti, lahko začnemo ustvarjati projektne datoteke in uvažati Bootstrap.

Struktura projekta

Mapo smo že ustvarili my-projectin inicializirali npm. Zdaj bomo ustvarili tudi svojo srcmapo, slogovno datoteko in datoteko JavaScript, da zaokrožimo strukturo projekta. Zaženite naslednje iz my-projectali ročno ustvarite strukturo map in datotek, prikazano spodaj.

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

Ko končate, bi moral vaš celoten projekt izgledati takole:

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

Na tej točki je vse na pravem mestu, vendar Vite ne bo deloval, ker še nismo izpolnili našega vite.config.js.

Konfigurirajte Vite

Z nameščenimi odvisnostmi in našo projektno mapo, pripravljeno za začetek kodiranja, lahko zdaj konfiguriramo Vite in izvajamo naš projekt lokalno.

Odprite vite.config.jsv urejevalniku. Ker je prazen, mu bomo morali dodati nekaj standardne konfiguracije, da bomo lahko zagnali naš strežnik. Ta del konfiguracije pove Viteu, naj poišče JavaScript našega projekta in kako naj se obnaša razvojni strežnik (vlečenje iz srcmape z vročim ponovnim nalaganjem).
```
const path = require('path')

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

Naprej izpolnimo src/index.html. To je stran HTML, ki jo bo Vite naložil v brskalnik za uporabo priloženega CSS in JS, ki ji ju bomo dodali v kasnejših korakih.

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

Tu smo vključili delček oblikovanja Bootstrapa z div class="container"in <button>tako, da vidimo, kdaj Vite naloži Bootstrapov CSS.

Zdaj potrebujemo skript npm za zagon Vite. Odprite package.jsonin dodajte startskript, prikazan spodaj (preskusni skript bi morali že imeti). Ta skript bomo uporabili za zagon našega lokalnega strežnika Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
In končno lahko začnemo Vite. Iz my-projectmape v vašem terminalu zaženite ta na novo dodan skript npm:
```
npm start
```

V naslednjem in zadnjem razdelku tega vodnika bomo uvozili vse Bootstrapove CSS in JavaScript.

Uvozi Bootstrap

Nastavite uvoz Bootstrapa Sass v vite.config.js. Vaša konfiguracijska datoteka je zdaj dokončana in bi se morala ujemati s spodnjim delčkom. Edini nov del tukaj je resolverazdelek – uporabljamo ga za dodajanje vzdevka našim izvornim datotekam v notranjosti node_modules, da bo uvoz čim preprostejši.

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

Zdaj pa uvozimo Bootstrapov CSS. src/scss/styles.scssČe želite uvoziti vse Bootstrapove izvorne kode Sass, dodajte naslednje .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Naše slogovne tabele lahko uvozite tudi posamično, če želite. Za podrobnosti preberite naše dokumente o uvozu Sass .
Nato naložimo CSS in uvozimo Bootstrapov JavaScript. Dodajte naslednje, src/js/main.jsda naložite CSS in uvozite vse Bootstrapove JS. Popper bo samodejno uvožen prek programa Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Po potrebi lahko uvozite tudi vtičnike JavaScript posamično, da zmanjšate velikost paketov:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Preberite naše dokumente JavaScript za več informacij o uporabi vtičnikov Bootstrap.
In končali ste! 🎉 Ko sta izvorna koda Bootstrap Sass in JS v celoti naložena, bi moral vaš lokalni razvojni strežnik videti takole.

Zdaj lahko začnete dodajati vse komponente Bootstrap, ki jih želite uporabiti. Prepričajte se, da si ogledate celoten primer projekta Vite, da ugotovite, kako vključiti dodaten Sass po meri in optimizirati svojo zgradbo z uvozom samo tistih delov Bootstrapovega CSS in JS, ki jih potrebujete.

Vidite tukaj nekaj narobe ali zastarelo? Odprite vprašanje na GitHubu . Potrebujete pomoč pri odpravljanju težav? Iščite ali začnite razpravo na GitHubu.