Bootstrap & Vite

Oficialus vadovas, kaip įtraukti ir susieti Bootstrap CSS ir JavaScript į savo projektą naudojant Vite.

Šiame puslapyje

Norite pereiti iki galo? Atsisiųskite šio vadovo šaltinio kodą ir demonstracinę versiją iš twbs/examples saugyklos . Taip pat galite atidaryti pavyzdį „StackBlitz “, kad galėtumėte redaguoti tiesiogiai.

Sąranka

Kuriame „Vite“ projektą naudodami „Bootstrap“ nuo nulio, todėl tam, kad galėtume iš tikrųjų pradėti, yra keletas būtinų sąlygų ir žingsnių. Šiame vadove reikia turėti įdiegtą Node.js ir šiek tiek susipažinti su terminalu.

Sukurkite projekto aplanką ir nustatykite npm. Sukursime my-projectaplanką ir inicijuosime npm su -yargumentu, kad jis neužduotų mums visų interaktyvių klausimų.
```
mkdir my-project && cd my-project
npm init -y
```
Įdiekite Vite. Skirtingai nuo mūsų žiniatinklio paketo vadovo, čia yra tik viena kūrimo įrankio priklausomybė. Mes naudojame --save-devsignalą, kad ši priklausomybė skirta tik plėtrai, o ne gamybai.
```
npm i --save-dev vite
```
Įdiekite „Bootstrap“. Dabar galime įdiegti „Bootstrap“. Taip pat įdiegsime „Popper“, nes mūsų išskleidžiamieji meniu, iššokantys langai ir patarimai priklauso nuo jo padėties. Jei neplanuojate naudoti šių komponentų, galite praleisti Popper čia.
```
npm i --save bootstrap @popperjs/core
```
Įdiekite papildomą priklausomybę. Be Vite ir Bootstrap, mums reikia kitos priklausomybės (Sass), kad galėtume tinkamai importuoti ir sujungti Bootstrap CSS.
```
npm i --save-dev sass
```

Dabar, kai įdiegėme ir nustatėme visas reikalingas priklausomybes, galime pradėti kurti projekto failus ir importuoti „Bootstrap“.

Projekto struktūra

Mes jau sukūrėme my-projectaplanką ir inicijavome npm. Dabar taip pat sukursime srcaplanką, stiliaus lentelę ir „JavaScript“ failą, kad užbaigtume projekto struktūrą. Vykdykite toliau nurodytus veiksmus iš my-project, arba rankiniu būdu sukurkite toliau pateiktą aplanko ir failo struktūrą.

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

Kai baigsite, visas jūsų projektas turėtų atrodyti taip:

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

Šiuo metu viskas savo vietoje, bet Vite neveiks, nes dar neužpildėme savo vite.config.js.

Konfigūruoti Vite

Įdiegę priklausomybes ir paruošę projekto aplanką, kad galėtume pradėti koduoti, dabar galime sukonfigūruoti „Vite“ ir vykdyti projektą vietoje.

Atidarykite vite.config.jssavo redaktoriuje. Kadangi jis tuščias, turėsime pridėti tam tikrą pagrindinę konfigūraciją, kad galėtume paleisti serverį. Ši konfigūracijos dalis nurodo, kad „Vite“ turi ieškoti mūsų projekto „JavaScript“ ir kaip turėtų veikti kūrimo serveris (ištraukti iš srcaplanko su karštu įkėlimu).
```
const path = require('path')

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

Toliau pildome src/index.html. Tai yra HTML puslapis, kurį „Vite“ įkels į naršyklę, kad panaudotų susietą CSS ir JS, kurį pridėsime vėliau.

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

Čia įtraukiame šiek tiek Bootstrap stiliaus su div class="container"ir <button>, kad pamatytume, kada Vite įkelia Bootstrap CSS.

Dabar mums reikia npm scenarijaus, kad galėtume paleisti Vite. Atidarykite package.jsonir pridėkite toliau pateiktą startscenarijų (jau turėtumėte turėti bandomąjį scenarijų). Šį scenarijų naudosime vietiniam Vite dev serveriui paleisti.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ir pagaliau galime pradėti Vite. Iš my-projectsavo terminalo aplanko paleiskite tą naujai pridėtą npm scenarijų:
```
npm start
```

Kitame ir paskutiniame šio vadovo skyriuje importuosime visą „Bootstrap“ CSS ir „JavaScript“.

Importuoti Bootstrap

Nustatykite Bootstrap Sass importavimą vite.config.js. Jūsų konfigūracijos failas dabar baigtas ir turėtų atitikti toliau pateiktą fragmentą. Vienintelė nauja dalis yra resolveskyrius – mes naudojame jį norėdami pridėti slapyvardį prie šaltinio failų viduje node_modules, kad importavimas būtų kuo paprastesnis.
```
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
  }
}
```
Dabar importuokime „Bootstrap“ CSS. Pridėkite toliau pateiktą, src/scss/styles.scsskad importuotumėte visą „Bootstrap“ šaltinį „Sass“.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Taip pat galite importuoti mūsų stilių lapus atskirai, jei norite. Norėdami gauti daugiau informacijos, skaitykite mūsų Sass importavimo dokumentus .
Tada įkeliame CSS ir importuojame „Bootstrap“ JavaScript. Pridėkite toliau pateiktą, src/js/main.jskad įkeltumėte CSS ir importuotumėte visą „Bootstrap“ JS. „Popper“ bus automatiškai importuotas per „Bootstrap“.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Taip pat galite importuoti „JavaScript“ papildinius atskirai, jei reikia, kad sumažintumėte paketų dydį:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Norėdami gauti daugiau informacijos apie tai, kaip naudoti „Bootstrap“ papildinius, skaitykite „JavaScript“ dokumentus .
Ir viskas! 🎉 Kai Bootstrap šaltinis Sass ir JS yra visiškai įkelti, jūsų vietinis kūrimo serveris dabar turėtų atrodyti taip.

Dabar galite pradėti pridėti bet kokius „Bootstrap“ komponentus, kuriuos norite naudoti. Būtinai peržiūrėkite visą „Vite“ pavyzdinį projektą , kaip įtraukti papildomą tinkintą „Sass“ ir optimizuoti savo kūrimą importuodami tik jums reikalingas „Bootstrap“ CSS ir JS dalis.

Matote čia kažką ne taip ar pasenę? Atidarykite problemą „GitHub“ . Reikia pagalbos sprendžiant triktis? Ieškokite arba pradėkite diskusiją „GitHub“.