Bootstrap & Vite

Cov lus qhia tseem ceeb rau kev suav nrog thiab ntim Bootstrap's CSS thiab JavaScript hauv koj qhov project siv Vite.

Ntawm nplooj ntawv no

Xav hla mus rau qhov kawg? Download the source code and working demo for this guide from the twbs/example repository . Koj tuaj yeem qhib qhov piv txwv hauv StackBlitz rau kev hloov kho nyob.

Teeb tsa

Peb tab tom tsim Vite qhov project nrog Bootstrap los ntawm kos, yog li muaj qee qhov yuav tsum tau ua ua ntej thiab ua ntej peb tuaj yeem pib tiag tiag. Cov lus qhia no xav kom koj muaj Node.js ntsia thiab qee qhov kev paub nrog lub davhlau ya nyob twg.

Tsim ib qhov project folder thiab teeb npm. Peb mam li tsim cov my-projectntawv tais ceev tseg thiab pib npm nrog cov -ylus sib cav kom tsis txhob nug peb tag nrho cov lus nug sib tham.
```
mkdir my-project && cd my-project
npm init -y
```
Nruab Vite. Tsis zoo li peb phau ntawv qhia Webpack, tsuas muaj ib qho kev tsim cov cuab yeej nyob ntawm no. Peb siv --save-devlos qhia tias qhov kev cia siab no tsuas yog siv rau kev txhim kho thiab tsis yog rau kev tsim khoom.
```
npm i --save-dev vite
```
Nruab Bootstrap. Tam sim no peb tuaj yeem nruab Bootstrap. Peb tseem yuav nruab Popper txij li peb qhov kev poob qis, popovers, thiab cov lus qhia nyob ntawm nws rau lawv qhov chaw. Yog tias koj tsis npaj siv cov khoom no, koj tuaj yeem tshem tawm Popper ntawm no.
```
npm i --save bootstrap @popperjs/core
```
Txhim kho qhov kev vam khom ntxiv. Ntxiv nrog rau Vite thiab Bootstrap, peb xav tau lwm qhov kev vam khom (Sass) kom raug ntshuam thiab ntim Bootstrap's CSS.
```
npm i --save-dev sass
```

Tam sim no uas peb muaj tag nrho cov tsim nyog dependencies ntsia thiab teeb tsa, peb tuaj yeem ua haujlwm tsim cov ntaub ntawv project thiab importing Bootstrap.

Qhov project qauv

Peb twb tau tsim cov my-projectntawv tais ceev tseg thiab pib npm. Tam sim no peb tseem yuav tsim peb cov srcntawv tais ceev tseg, stylesheet, thiab JavaScript cov ntaub ntawv txhawm rau nthuav tawm cov qauv tsim. Khiav cov hauv qab no los ntawm my-project, lossis manually tsim cov ntawv tais ceev tseg thiab cov qauv ntaub ntawv qhia hauv qab no.

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

Thaum koj ua tiav, koj qhov project tiav yuav tsum zoo li no:

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

Lub sijhawm no, txhua yam nyob rau hauv qhov chaw, tab sis Vite yuav tsis ua haujlwm vim peb tseem tsis tau sau rau hauv peb vite.config.js.

Configure Vite

Nrog kev vam khom thiab peb qhov project folder npaj rau peb pib coding, tam sim no peb tuaj yeem teeb tsa Vite thiab khiav peb qhov project hauv zos.

Qhib vite.config.jskoj tus editor. Txij li nws tsis muaj dab tsi, peb yuav tsum tau ntxiv qee qhov boilerplate config rau nws kom peb tuaj yeem pib peb lub server. Qhov no ntawm lub config qhia Vite tau mus nrhiav peb qhov project JavaScript thiab yuav ua li cas cov neeg rau zaub mov kev loj hlob yuav tsum coj (rub los ntawm lub srcnplaub tshev nrog kub reload).
```
const path = require('path')

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

Tom ntej no peb sau rau hauv src/index.html. Nov yog nplooj ntawv HTML Vite yuav thauj khoom hauv qhov browser los siv cov ntaub ntawv CSS thiab JS peb mam li ntxiv rau hauv cov kauj ruam tom ntej.

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

Peb suav nrog me ntsis ntawm Bootstrap styling ntawm no nrog rau div class="container"thiab <button>kom peb pom thaum Bootstrap's CSS yog loaded los ntawm Vite.

Tam sim no peb xav tau npm tsab ntawv los khiav Vite. Qhib package.jsonthiab ntxiv cov startntawv qhia hauv qab no (koj yuav tsum muaj cov ntawv xeem lawm). Peb yuav siv tsab ntawv no los pib peb lub zos Vite dev server.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Thiab thaum kawg, peb tuaj yeem pib Vite. Los ntawm cov my-projectntawv tais ceev tseg hauv koj lub davhlau ya nyob twg, khiav qhov tshiab npm tsab ntawv:
```
npm start
```

Hauv seem tom ntej thiab zaum kawg rau phau ntawv qhia no, peb yuav import tag nrho Bootstrap's CSS thiab JavaScript.

Ntshuam Bootstrap

Teem Bootstrap's Sass ntshuam hauv vite.config.js. Koj cov ntaub ntawv teeb tsa tam sim no ua tiav thiab yuav tsum phim cov ntsiab lus hauv qab no. Qhov tsuas yog qhov tshiab ntawm no yog resolventu - peb siv qhov no los ntxiv cov npe rau peb cov ntaub ntawv hauv tsev node_moduleskom yooj yim li sai tau.

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

Tam sim no, cia peb import Bootstrap's CSS. Ntxiv cov hauv qab no src/scss/styles.scssrau import tag nrho cov Bootstrap qhov chaw Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Koj tseem tuaj yeem import peb cov ntawv style ib tus zuj zus yog tias koj xav tau. Nyeem peb Sass import docs kom paub meej.
Tom ntej no peb thauj CSS thiab import Bootstrap's JavaScript. Ntxiv cov hauv qab no src/js/main.jsmus thauj cov CSS thiab import tag nrho cov Bootstrap's JS. Popper yuav raug import los ntawm Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Koj tseem tuaj yeem import JavaScript plugins ib tus zuj zus raws li qhov xav tau los khaws cov pob ntau thiab tsawg:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Nyeem peb cov ntaub ntawv JavaScript kom paub ntau ntxiv txog kev siv Bootstrap's plugins.
Thiab koj ua tiav! 🎉 Nrog Bootstrap qhov chaw Sass thiab JS tag nrho loaded, koj lub zos kev loj hlob server yuav tsum tam sim no zoo li no.

Tam sim no koj tuaj yeem pib ntxiv ib qho Bootstrap Cheebtsam uas koj xav siv. Nco ntsoov xyuas qhov ua tiav Vite piv txwv qhov project yuav ua li cas suav nrog kev cai Sass ntxiv thiab ua kom zoo dua koj tsim los ntawm kev xa cov khoom ntawm Bootstrap's CSS thiab JS uas koj xav tau.

Pom ib yam dab tsi tsis ncaj ncees lawm los yog tsis muaj hnub no? Thov qhib qhov teeb meem ntawm GitHub . Xav tau kev pab daws teeb meem? Nrhiav lossis pib sib tham ntawm GitHub.