Bootstrap & Vite

An iùl oifigeil air mar as urrainn dhut CSS agus JavaScript Bootstrap a thoirt a-steach agus a phasgadh sa phròiseact agad a’ cleachdadh Vite.

Air an duilleig seo

A bheil thu airson leum chun deireadh? Luchdaich sìos an còd stòr agus an demo obrach airson an iùl seo bhon stòr twbs / samples . Faodaidh tu cuideachd an eisimpleir fhosgladh ann an StackBlitz airson deasachadh beò.

Suidhich

Tha sinn a’ togail pròiseact Vite le Bootstrap bhon fhìor thoiseach, agus mar sin tha cuid de ro-ghoireasan ann agus ceumannan air thoiseach mus urrainn dhuinn tòiseachadh dha-rìribh. Tha an iùl seo ag iarraidh gum bi Node.js agad air a chuir a-steach agus beagan eòlais air a’ cheann-uidhe.

Cruthaich pasgan pròiseict agus cuir air dòigh npm. Cruthaichidh sinn am my-projectpasgan agus tòisichidh sinn npm leis an -yargamaid gus nach cuir sinn na ceistean eadar-ghnìomhach oirnn uile.
```
mkdir my-project && cd my-project
npm init -y
```
Stàlaich Vite. Eu-coltach ris an stiùireadh Webpack againn, chan eil ach aon eisimeileachd air inneal togail an seo. Bidh sinn a’ cleachdadh --save-deva bhith a’ comharrachadh nach eil an eisimeileachd seo ach airson cleachdadh leasachaidh agus chan ann airson cinneasachadh.
```
npm i --save-dev vite
```
Stàlaich Bootstrap. A-nis is urrainn dhuinn Bootstrap a stàladh. Stàlaichidh sinn Popper cuideachd leis gu bheil na dropdowns, popovers, agus molaidhean innealan againn an urra ris airson an suidheachadh. Mura h-eil thu an dùil na co-phàirtean sin a chleachdadh, faodaidh tu Popper fhàgail an seo.
```
npm i --save bootstrap @popperjs/core
```
Stàlaich eisimeileachd a bharrachd. A bharrachd air Vite agus Bootstrap, feumaidh sinn eisimeileachd eile (Sass) gus CSS Bootstrap a thoirt a-steach agus a phasgadh gu ceart.
```
npm i --save-dev sass
```

A-nis gu bheil a h-uile eisimeileachd riatanach againn air a chuir a-steach agus air a chuir air dòigh, is urrainn dhuinn faighinn gu obair a’ cruthachadh faidhlichean a ’phròiseict agus a’ toirt a-steach Bootstrap.

Structar pròiseict

Tha sinn air am my-projectpasgan a chruthachadh mu thràth agus air tòiseachadh npm. A-nis cruthaichidh sinn ar srcpasgan, duilleag stoidhle, agus faidhle JavaScript gus structar a’ phròiseict a thoirt gu crìch. Ruith na leanas bho my-project, no cruthaich le làimh am pasgan agus an structar faidhle a chithear gu h-ìosal.

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

Nuair a bhios tu deiseil, bu chòir don phròiseact iomlan agad coimhead mar seo:

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

Aig an ìre seo, tha a h-uile dad san àite cheart, ach chan obraich Vite leis nach eil sinn air ar lìonadh a-steach vite.config.jsfhathast.

Dèan rèiteachadh air Vite

Le eisimeileachd air a chuir a-steach agus am pasgan pròiseict againn deiseil airson tòiseachadh air còdadh, is urrainn dhuinn a-nis Vite a rèiteachadh agus ar pròiseact a ruith gu h-ionadail.

Fosgail vite.config.jsanns an deasaiche agad. Leis gu bheil e bàn, feumaidh sinn beagan config boilerplate a chur ris gus an urrainn dhuinn ar frithealaiche a thòiseachadh. Tha am pàirt seo den config ag innse do Vite gum biodh iad a’ coimhead airson JavaScript a’ phròiseict againn agus mar a bu chòir don fhrithealaiche leasachaidh a ghiùlan (a’ tarraing bhon srcphasgan le ath-luchdachadh teth).
```
const path = require('path')

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

An uairsin bidh sinn a 'lìonadh a-steach src/index.html. Is e seo an duilleag HTML a luchdaicheas Vite sa bhrobhsair gus an CSS cuachta agus JS a chleachdadh a chuireas sinn ris ann an ceumannan nas fhaide air adhart.

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

Tha sinn a’ toirt a-steach beagan stoidhle Bootstrap an seo leis an div class="container"agus <button>gus am faic sinn cuin a bhios CSS Bootstrap air a luchdachadh le Vite.

A-nis feumaidh sinn sgriobt npm airson Vite a ruith. Fosgail package.jsonagus cuir ris an startsgriobt gu h-ìosal (bu chòir dhut an sgriobt deuchainn a bhith agad mu thràth). Cleachdaidh sinn an sgriobt seo gus am frithealaiche Vite dev ionadail againn a thòiseachadh.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Agus mu dheireadh, is urrainn dhuinn tòiseachadh air Vite. Bhon my-projectphasgan sa cheann-uidhe agad, ruith an sgriobt npm a tha air ùr chur ris:
```
npm start
```

Anns an ath earrann agus an earrann mu dheireadh den stiùireadh seo, bheir sinn a-steach CSS agus JavaScript aig Bootstrap gu lèir.

Cuir a-steach Bootstrap

Stèidhich in-mhalairt Sass Bootstrap ann an vite.config.js. Tha am faidhle rèiteachaidh agad a-nis deiseil agus bu chòir dha a bhith co-ionnan ris a’ chriomag gu h-ìosal. Is e an aon phàirt ùr an seo an resolveearrann - bidh sinn a’ cleachdadh seo gus alias a chuir ris na faidhlichean stòr againn a-staigh node_modulesgus in-mhalairt a chumail cho sìmplidh sa ghabhas.
```
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
  }
}
```
A-nis, leig dhuinn CSS Bootstrap a thoirt a-steach. Cuir na leanas ris src/scss/styles.scssgus an stòr Bootstrap gu lèir a thoirt a-steach Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Faodaidh tu cuideachd na duilleagan stoidhle againn a thoirt a-steach leotha fhèin ma thogras tu. Leugh na docaichean in-mhalairt Sass againn airson mion-fhiosrachadh.
An uairsin luchdaichidh sinn an CSS agus bheir sinn a-steach JavaScript Bootstrap. Cuir na leanas ris src/js/main.jsgus an CSS a luchdachadh agus cuir a-steach JS Bootstrap gu lèir. Thèid Popper a thoirt a-steach gu fèin-ghluasadach tro Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Faodaidh tu cuideachd plugins JavaScript a thoirt a-steach leotha fhèin mar a dh ’fheumar gus meudan pasgan a chumail sìos:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Leugh na docaichean JavaScript againn airson tuilleadh fiosrachaidh mu mar a chleachdas tu plugins Bootstrap.
Agus tha thu deiseil! 🎉 Le stòr Bootstrap Sass agus JS làn luchdaichte, bu chòir don t-seirbheisiche leasachaidh ionadail agad a-nis coimhead mar seo.

A-nis faodaidh tu tòiseachadh air co-phàirtean Bootstrap sam bith a tha thu airson a chleachdadh a chuir ris. Dèan cinnteach gun toir thu sùil air a’ phròiseact eisimpleir Vite iomlan airson mar a bheir thu a-steach Sass àbhaisteach a bharrachd agus an togail agad a mheudachadh le bhith a’ toirt a-steach dìreach na pàirtean de CSS agus JS aig Bootstrap a tha a dhìth ort.

Am faic thu rudeigin ceàrr no seann-fhasanta an seo? Feuch an fosgail thu cùis air GitHub . A bheil feum agad air cuideachadh gus fuasgladh fhaighinn air duilgheadasan? Rannsaich no tòisich còmhradh air GitHub.