Bootstrap & Vite
Tataiso ea semmuso ea ho kenyelletsa le ho bokella Bootstrap's CSS le JavaScript morerong oa hau u sebelisa Vite.
Tlhophiso
Re ntse re aha projeke ea Vite ka Bootstrap ho tloha qalong, kahoo ho na le lintho tse hlokahalang le mehato e ka pele pele re ka qala. Tataiso ena e hloka hore u be le Node.js e kentsoeng le ho tloaelana le terminal.
-
Theha foldara ea projeke ebe u seta npm. Re tla theha
my-project
foldara ebe re qala npm ka-y
khang ho e qoba ho re botsa lipotso tsohle tse amanang.mkdir my-project && cd my-project npm init -y
-
Kenya Vite. Ho fapana le tataiso ea rona ea Webpack, ho na le sesebelisoa se le seng feela sa ho aha mona. Re sebelisa
--save-dev
ho bontša hore ts'episo ena ke ea ts'ebeliso ea nts'etsopele eseng bakeng sa tlhahiso.npm i --save-dev vite
-
Kenya Bootstrap. Hona joale re ka kenya Bootstrap. Hape re tla kenya Popper kaha li-dropdown tsa rona, popover, le lisebelisoa tsa lisebelisoa li itšetlehile ka eona bakeng sa boemo ba tsona. Haeba u sa rera ho sebelisa likarolo tseo, u ka siea Popper mona.
npm i --save bootstrap @popperjs/core
-
Kenya ts'ehetso e eketsehileng. Ntle le Vite le Bootstrap, re hloka boitšepo bo bong (Sass) ho kenya le ho bokella CSS ea Bootstrap hantle.
npm i --save-dev sass
Kaha joale re na le litšepiso tsohle tse hlokahalang tse kentsoeng le ho seta, re ka qala ho sebetsa ho theha lifaele tsa projeke le ho kenya Bootstrap.
Sebopeho sa morero
Re se re thehile my-project
foldara mme re kentse npm. Joale re tla boela re thehe src
foldara ea rona, sheetsheet le faele ea JavaScript ho tlatsa sebopeho sa projeke. Etsa tse latelang ho tloha ho my-project
, kapa u iketsetse foldara le sebopeho sa faele se bontšitsoeng ka tlase.
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
Ha o qetile, projeke ea hau e felletseng e lokela ho shebahala tjena:
my-project/
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ | └── styles.scss
| └── index.html
├── package-lock.json
├── package.json
└── vite.config.js
Mothating ona, tsohle li sebakeng se nepahetseng, empa Vite e ke ke ea sebetsa hobane ha re so tlatse tsa rona vite.config.js
.
Lokisa Vite
Kaha re na le litšepiso tse kentsoeng 'me foldara ea rona ea projeke e se e loketse hore re qale ho kenya likhoutu, joale re ka hlophisa Vite le ho tsamaisa morero oa rona sebakeng sa heno.
-
Bula
vite.config.js
ho mohlophisi oa hau. Kaha ha e na letho, re tla hloka ho kenya li-boilerplate config ho eona hore re tsebe ho qala seva ea rona. Karolo ena ea config e bolella Vite hore ba batle JavaScript ea morero oa rona le hore na seva sa nts'etsopele se lokela ho itšoara joang (ho hula ho tlohasrc
foldareng ka ho kenya hape ho chesang).const path = require('path') export default { root: path.resolve(__dirname, 'src'), server: { port: 8080, hot: true } }
-
Ka mor'a moo re tlatsa
src/index.html
. Lena ke leqephe la HTML Vite e tla kenya sebatli ho sebelisa CSS e bokelletsoeng mme JS re tla e kenyelletsa ho eona ka mor'a mehato.<!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>
Re kenyelletsa setaele sa Bootstrap mona le
div class="container"
le<button>
hore re bone ha CSS ea Bootstrap e laeloa ke Vite. -
Joale re hloka script ea npm ho tsamaisa Vite. Bula
package.json
'me u kenyestart
mongolo o bontšitsoeng ka tlase (o tlameha hore ebe o se o ntse o e-na le lengolo la tlhahlobo). Re tla sebelisa sengoloa sena ho qala seva sa rona sa lehae sa Vite dev.{ // ... "scripts": { "start": "vite", "test": "echo \"Error: no test specified\" && exit 1" }, // ... }
-
'Me qetellong, re ka qala Vite. Ho tsoa
my-project
foldareng e ho terminal ea hau, tsamaisa mongolo o sa tsoa eketsoa oa npm:npm start
Karolong e latelang le ea ho qetela ea tataiso ena, re tla kenya CSS le JavaScript kaofela tsa Bootstrap.
Kenya Bootstrap
-
Hlophisa Bootstrap's Sass import in
vite.config.js
. Faele ea hau ea litlhophiso e se e felile 'me e lokela ho ts'oana le snippet e ka tlase. Karolo e ncha feela mona keresolve
karolo - re sebelisa sena ho kenyelletsa lebitso la li-alias ho lifaele tsa rona tsa mohloli kaharenode_modules
ho boloka thepa e tsoang kantle e le bonolo kamoo ho ka khonehang.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 } }
-
Joale, ha re ke re kenye CSS ea Bootstrap. Kenya tse latelang ho
src/scss/styles.scss
kenya mehloli eohle ea Sass ea Bootstrap.// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";
U ka boela ua kenya li-stylesheets tsa rona ka bonngoe haeba u batla. Bala litokomane tsa rona tsa Sass ho fumana lintlha.
-
Ka mor'a moo re kenya CSS ebe re kenya JavaScript ea Bootstrap. Kenya tse latelang ho
src/js/main.js
kenya CSS le ho kenya tsohle tsa Bootstrap's JS. Popper e tla romelloa kantle ho naha ka bo eona ka Bootstrap.// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'
U ka kenya li-plugins tsa JavaScript ka bonngoe kamoo ho hlokahalang ho boloka boholo ba bongata bo le tlase:
import Alert from 'bootstrap/js/dist/alert'; // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap';
Bala litokomane tsa rona tsa JavaScript bakeng sa tlhaiso-leseling e batsi mabapi le mokhoa oa ho sebelisa li-plugins tsa Bootstrap.
-
Mme o qetile! 🎉 Kaha mohloli oa Bootstrap oa Sass le JS o tletse ka botlalo, seva sa hau sa nts'etsopele ea lehae se lokela ho shebahala tjena.
Joale o ka qala ho kenyelletsa lisebelisoa life kapa life tsa Bootstrap tseo u batlang ho li sebelisa. Etsa bonnete ba hore u sheba projeke e felletseng ea mohlala oa ho kenyelletsa tloaelo ea Sass le ho ntlafatsa moaho oa hau ka ho kenya likarolo tsa CSS tsa Bootstrap le JS feela tseo u li hlokang.
U bona ho hong ho phoso kapa e siiloe ke nako mona? Ka kopo bula bothata ho GitHub . U hloka thuso ea ho rarolla mathata? Batla kapa qala puisano ho GitHub.