Боотстрап & Вите

Званични водич о томе како да укључите и повежете Боотстрап-ов ЦСС и ЈаваСцрипт у свој пројекат користећи Вите.

На овој страници

Желите да прескочите до краја? Преузмите изворни код и радну демонстрацију за овај водич из твбс/екамплес спремишта . Такође можете отворити пример у СтацкБлитзу за уређивање уживо.

Подесити

Градимо Вите пројекат са Боотстрапом од нуле, тако да постоје неки предуслови и први кораци пре него што заиста почнемо. Овај водич захтева да имате инсталиран Ноде.јс и да сте упознати са терминалом.

Направите фасциклу пројекта и подесите нпм. Направићемо my-projectфасциклу и иницијализовати нпм са -yаргументом како бисмо избегли да нам поставља сва интерактивна питања.
```
mkdir my-project && cd my-project
npm init -y
```
Инсталирајте Вите. За разлику од нашег Вебпацк водича, овде постоји само једна зависност од алата за прављење. Користимо --save-devда сигнализирамо да је ова зависност само за развојну употребу, а не за производњу.
```
npm i --save-dev vite
```
Инсталирајте Боотстрап. Сада можемо да инсталирамо Боотстрап. Такође ћемо инсталирати Поппер пошто наши падајући мении, искачући огласи и описи алата зависе од тога за њихово позиционирање. Ако не планирате да користите те компоненте, овде можете изоставити Попера.
```
npm i --save bootstrap @popperjs/core
```
Инсталирајте додатну зависност. Поред Вите-а и Боотстрапа, потребна нам је још једна зависност (Сасс) да бисмо правилно увезли и повезали Боотстрап-ов ЦСС.
```
npm i --save-dev sass
```

Сада када имамо инсталиране и конфигурисане све неопходне зависности, можемо да пређемо на креирање пројектних датотека и увоз Боотстрап-а.

Структура пројекта

Већ смо креирали my-projectфасциклу и иницијализовали нпм. Сада ћемо такође креирати нашу srcфасциклу, стилове и ЈаваСцрипт датотеку да бисмо заокружили структуру пројекта. Покрените следеће из my-projectили ручно креирајте фасциклу и структуру датотека приказану испод.

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

Када завршите, ваш комплетан пројекат би требао изгледати овако:

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

У овом тренутку све је на правом месту, али Вите неће радити јер још нисмо попунили наше vite.config.js.

Конфигуришите Вите

Са инсталираним зависностима и нашом фасциклом пројекта спремном за почетак кодирања, сада можемо да конфигуришемо Вите и да покренемо наш пројекат локално.

Отворите vite.config.jsу свом уређивачу. Пошто је празан, мораћемо да му додамо неку шаблонску конфигурацију да бисмо могли да покренемо наш сервер. Овај део конфигурације говори Вите-у да тражи ЈаваСцрипт нашег пројекта и како би развојни сервер требало да се понаша (повлачење из srcфасцикле са врућим поновним учитавањем).
```
const path = require('path')

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

Затим попуњавамо src/index.html. Ово је ХТМЛ страница коју ће Вите учитати у претраживач да би користио ЦСС и ЈС који ћемо јој додати у каснијим корацима.

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

Овде укључујемо мало Боотстрап стила са div class="container"и <button>тако да видимо када је Боотстрап ЦСС учитан од стране Вите-а.

Сада нам је потребна нпм скрипта за покретање Вите-а. Отворите package.jsonи додајте startскрипту приказану испод (требало би да већ имате тестну скрипту). Користићемо ову скрипту да покренемо наш локални Вите дев сервер.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
И коначно, можемо покренути Вите. Из my-projectфасцикле у вашем терминалу покрените ту новододату нпм скрипту:
```
npm start
```

У следећем и последњем одељку овог водича, ми ћемо увести све Боотстрап-ове ЦСС и ЈаваСцрипт.

Увези Боотстрап

Подесите Боотстрап-ов Сасс увоз у vite.config.js. Ваша конфигурациона датотека је сада завршена и требало би да се подудара са исечком испод. Једини нови део овде је resolveодељак — користимо га да бисмо додали псеудоним нашим изворним датотекама унутра node_modulesкако бисмо увоз учинили што једноставнијим.
```
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
  }
}
```
Сада, хајде да увеземо Боотстрап-ов ЦСС. Додајте следеће да src/scss/styles.scssбисте увезли све изворне Сасс Боотстрапа.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Такође можете да увезете наше стилове појединачно ако желите. Прочитајте наше Сасс увозне документе за детаље.
Затим учитавамо ЦСС и увозимо Боотстрап-ов ЈаваСцрипт. Додајте следеће да src/js/main.jsбисте учитали ЦСС и увезли све Боотстрап-ове ЈС. Поппер ће бити аутоматски увезен преко Боотстрапа.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Такође можете да увезете ЈаваСцрипт додатке појединачно по потреби да бисте смањили величине пакета:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Прочитајте наше ЈаваСцрипт документе за више информација о томе како да користите Боотстрап додатке.
И готови сте! 🎉 Када су изворни Сасс и ЈС Боотстрап потпуно учитани, ваш локални развојни сервер би сада требао изгледати овако.

Сада можете да почнете да додајете све Боотстрап компоненте које желите да користите. Обавезно погледајте комплетан Вите пројекат за пример како да укључите додатни прилагођени Сасс и оптимизујете своју верзију увозом само делова Боотстрап-овог ЦСС-а и ЈС-а који су вам потребни.

Видите овде нешто погрешно или застарело? Отворите проблем на ГитХуб-у . Потребна вам је помоћ у решавању проблема? Претражите или започните дискусију на ГитХуб-у.