Bootstrap & Vite

Oficiālais ceļvedis par to, kā iekļaut un apvienot Bootstrap CSS un JavaScript savā projektā, izmantojot Vite.

Šajā lapā

Vai vēlaties pāriet līdz beigām? Lejupielādējiet šīs rokasgrāmatas pirmkodu un darba demonstrāciju no twbs/examples krātuves . Varat arī atvērt piemēru StackBlitz tiešraides rediģēšanai.

Uzstādīt

Mēs veidojam Vite projektu ar Bootstrap no nulles, tāpēc ir daži priekšnosacījumi un pirmie soļi, lai mēs varētu patiešām sākt. Šajā rokasgrāmatā ir nepieciešams instalēt Node.js un nedaudz pārzināt termināli.

Izveidojiet projekta mapi un iestatiet npm. Mēs izveidosim my-projectmapi un inicializēsim npm ar -yargumentu, lai tā neuzdotu mums visus interaktīvos jautājumus.
```
mkdir my-project && cd my-project
npm init -y
```
Instalējiet Vite. Atšķirībā no mūsu Webpack rokasgrāmatas šeit ir tikai viena izveides rīka atkarība. Mēs izmantojam --save-dev, lai signalizētu, ka šī atkarība ir paredzēta tikai izstrādei, nevis ražošanai.
```
npm i --save-dev vite
```
Instalējiet Bootstrap. Tagad mēs varam instalēt Bootstrap. Mēs arī instalēsim Popper, jo mūsu nolaižamās izvēlnes, uznirstošie logi un rīka padomi ir atkarīgi no tā pozicionēšanai. Ja neplānojat izmantot šos komponentus, varat šeit izlaist Popper.
```
npm i --save bootstrap @popperjs/core
```
Instalējiet papildu atkarību. Papildus Vite un Bootstrap mums ir nepieciešama cita atkarība (Sass), lai pareizi importētu un grupētu Bootstrap CSS.
```
npm i --save-dev sass
```

Tagad, kad visas nepieciešamās atkarības ir instalētas un iestatītas, mēs varam sākt darbu, veidojot projekta failus un importējot Bootstrap.

Projekta struktūra

Mēs jau esam izveidojuši my-projectmapi un inicializējuši npm. Tagad mēs arī izveidosim savu srcmapi, stila lapu un JavaScript failu, lai noapaļotu projekta struktūru. Palaidiet tālāk norādīto no my-project, vai manuāli izveidojiet tālāk norādīto mapi un failu struktūru.

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

Kad esat pabeidzis, jūsu pilnajam projektam vajadzētu izskatīties šādi:

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

Šobrīd viss ir savās vietās, bet Vite nestrādās, jo vēl neesam aizpildījuši savu vite.config.js.

Konfigurēt Vite

Kad ir instalētas atkarības un mūsu projekta mape ir gatava kodēšanas sākšanai, mēs tagad varam konfigurēt Vite un palaist projektu lokāli.

Atveriet vite.config.jssavā redaktorā. Tā kā tas ir tukšs, mums būs jāpievieno daži konfigurācijas parametri, lai mēs varētu palaist savu serveri. Šī konfigurācijas daļa norāda, ka Vitei ir jāmeklē mūsu projekta JavaScript un kā jādarbojas izstrādes serverim (izvelkot no srcmapes ar karsto pārlādēšanu).
```
const path = require('path')

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

Tālāk mēs aizpildām src/index.html. Šī ir HTML lapa, ko Vite ielādēs pārlūkprogrammā, lai izmantotu komplektēto CSS un JS, ko mēs tai pievienosim vēlākās darbībās.

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

Mēs šeit iekļaujam nedaudz Bootstrap stila ar div class="container"un <button>, lai mēs redzētu, kad Vite ielādē Bootstrap CSS.

Tagad mums ir nepieciešams npm skripts, lai palaistu Vite. Atveriet package.jsonun pievienojiet starttālāk redzamo skriptu (jums jau ir jābūt testa skriptam). Mēs izmantosim šo skriptu, lai palaistu mūsu vietējo Vite dev serveri.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Un visbeidzot varam sākt Vite. No my-projecttermināļa mapes palaidiet tikko pievienoto npm skriptu:
```
npm start
```

Nākamajā un pēdējā šīs rokasgrāmatas sadaļā mēs importēsim visu Bootstrap CSS un JavaScript.

Importēt Bootstrap

Iestatiet Bootstrap Sass importēšanu vite.config.js. Jūsu konfigurācijas fails tagad ir pabeigts, un tam jāatbilst tālāk norādītajam fragmentam. Vienīgā jaunā daļa šeit ir resolvesadaļa — mēs to izmantojam, lai mūsu avota failiem pievienotu aizstājvārdu, lai node_modulesimportēšana būtu pēc iespējas vienkāršāka.
```
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
  }
}
```
Tagad importēsim Bootstrap CSS. Pievienojiet tālāk norādīto, src/scss/styles.scsslai importētu visu Bootstrap avotu Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ja vēlaties, varat arī importēt mūsu stilu lapas atsevišķi. Lai iegūtu sīkāku informāciju, izlasiet mūsu Sass importēšanas dokumentus .
Tālāk mēs ielādējam CSS un importējam Bootstrap JavaScript. Pievienojiet tālāk norādīto, src/js/main.jslai ielādētu CSS un importētu visu Bootstrap JS. Popper tiks automātiski importēts, izmantojot Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
You can also import JavaScript plugins individually as needed to keep bundle sizes down:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Read our JavaScript docs for more information on how to use Bootstrap’s plugins.
And you’re done! 🎉 With Bootstrap’s source Sass and JS fully loaded, your local development server should now look like this.

Now you can start adding any Bootstrap components you want to use. Be sure to check out the complete Vite example project for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap’s CSS and JS that you need.

See something wrong or out of date here? Please open an issue on GitHub. Need help troubleshooting? Search or start a discussion on GitHub.