Bootstrap leh Vite te a awm bawk

Vite hmanga i project-a Bootstrap-a CSS leh JavaScript dah leh bundle dan tur official guide.

He page ah hian

A tawp thlenga skip duh em? He guide atana source code leh working demo hi twbs/examples repository atang hian download rawh . Live editing atan StackBlitz ah pawh entirnan i hawng thei bawk .

Rem khawm

Bootstrap hmangin Vite project kan siam mek a, chuvangin kan tan tak tak hmain prerequisites leh up front step thenkhat a awm a ni. He guide hian Node.js install a ngai a, terminal hriat chian deuh a ngai bawk.

Project folder siam la, npm setup rawh. Folder kan siam ang a, my-projectnpm chu -yargument hmangin kan initialize ang a, chu chuan interactive question zawng zawng min zawh loh nan.
```
mkdir my-project && cd my-project
npm init -y
```
Vite chu install rawh. Kan Webpack guide ang lo takin hetah hian build tool dependency pakhat chauh a awm. --save-devHe innghahna hi hmasawnna hmanna atan chauh a ni a, thil siamchhuahna atan a ni lo tih signal atan kan hmang thin .
```
npm i --save-dev vite
```
Bootstrap chu install rawh. Tunah chuan Bootstrap kan install thei tawh ang. Kan dropdowns, popovers, leh tooltips te hi an positioning atan a innghat a nih avangin Popper pawh kan install dawn a ni. Chutiang components te hman i tum loh chuan hetah hian Popper hi i paih thei ang.
```
npm i --save bootstrap @popperjs/core
```
Additional dependency dah belh rawh. Vite leh Bootstrap bakah hian Bootstrap-a CSS dik taka import leh bundle tur chuan dependency dang (Sass) kan mamawh a ni.
```
npm i --save-dev sass
```

Tunah chuan dependency mamawh zawng zawng install leh setup vek kan nei tawh a, project file siam leh Bootstrap import hna kan thawk thei tawh ang.

Project kalpui dan tur

Folder kan siam tawh a, my-projectnpm kan initialize tawh bawk. srcTunah chuan project structure round out turin kan folder, stylesheet, leh JavaScript file te pawh kan siam dawn a ni. A hnuaia mi hi run la my-project, a nih loh leh a hnuaia folder leh file structure tarlan ang hian manual in siam rawh.

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

I tih zawh chuan i project kimchang chu hetiang hian a awm tur a ni:

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

Tun dinhmunah chuan engkim a hmun dik takah a awm tawh a, mahse Vite hian kan vite.config.jsla fill up loh avangin a thawk dawn lo.

Vite chu configure rawh

Depencies install tawh leh kan project folder kan coding tan theih nan kan inpeih tawh avangin Vite chu kan configure thei tawh ang a, kan project chu local takin kan run thei tawh ang.

vite.config.jsI editor ah khan hawng rawh. Blank a nih avangin kan server kan start theih nan boilerplate config engemaw zat kan dah belh a ngai dawn a ni. He config part hian Vite chu kan project JavaScript leh development server awm dan tur zawng turin a hrilh a ( srchot reload nen folder atanga pulling).
```
const path = require('path')

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

A dawtah chuan kan fill up leh src/index.htmlang . Hei hi HTML page Vite chuan browser-ah a load ang a, bundled CSS leh JS chu a hnua step hrang hrangah kan dah belh ang.

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

Hetah hian Bootstrap styling tlem kan dah tel a div class="container", <button>chutiang chuan Bootstrap-a CSS Vite-in a load hun kan hmuh theih nan.

Tunah chuan Vite run tur chuan npm script kan mamawh a ni. A hnuaia script tarlan hi hawng la package.json, add startrawh (test script chu i nei tawh tur a ni). He script hi kan local Vite dev server start nan kan hmang ang.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Tin, a tawp berah chuan Vite kan tan thei bawk. my-projectI terminal-a folder atang chuan chu npm script i dah thar chu run rawh:
```
npm start
```

He guide-a a hnuaia section leh a tawp berah hian Bootstrap-a CSS leh JavaScript zawng zawng kan import vek ang.

Bootstrap chu import rawh

Bootstrap a Sass import chu vite.config.js. Tunah chuan i configuration file chu a zo tawh a, a hnuaia snippet nen hian a inmil tur a ni. Hetah hian part thar awm chhun chu resolvesection hi a ni—hei hi kan hmang a, kan source files chhungah alias dahin node_modulesimports a awlsam thei ang bera dah theih a ni.
```
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
  }
}
```
Tunah chuan, Bootstrap a CSS hi import ila. src/scss/styles.scssBootstrap source Sass zawng zawng import turin a hnuaia mi hi add rawh .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Kan stylesheet te pawh i duh chuan a hranin i import thei bawk. A chipchiar zawka hriat duh chuan kan Sass import docs hi chhiar la .
A dawtah chuan CSS kan load a, Bootstrap a JavaScript kan import leh a. src/js/main.jsCSS load tur leh Bootstrap-a JS zawng zawng import tur chuan a hnuaia mi hi add rawh . Popper hi Bootstrap hmangin automatic in a import dawn a ni.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Bundle size tihhniam theih nan JavaScript plugins te chu a tul angin pakhat zel i import thei bawk:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bootstrap-a plugins hman dan tur hriat belh duh chuan kan JavaScript docs chhiar la .
Tin, i zo tawh bawk! 🎉 Bootstrap source Sass leh JS fully load tawh chuan tunah chuan i local development server chu hetiang hian a awm tur a ni.

Tunah chuan Bootstrap component i hman duh apiang i dah tan thei tawh ang. Bootstrap-a CSS leh JS i mamawh parts chauh import-a custom Sass dang dah belh leh i build optimize dan tur chu Vite example project kimchang kha lo en ve ngei ang che.

Hetah hian thil dik lo emaw, hun kal tawh emaw i hmu em? GitHub ah hian issue pakhat hawng la . Harsatna chinfelna kawngah tanpuina i mamawh em? GitHub ah hian zawng la, sawihona tan rawh .