Bootstrap va Vite
Vite-dan foydalanib loyihangizga Bootstrap-ning CSS va JavaScript-ni qanday qo'shish va to'plash bo'yicha rasmiy qo'llanma.
Sozlash; o'rnatish
Biz noldan boshlab Bootstrap bilan Vite loyihasini qurmoqdamiz, shuning uchun biz chindan ham boshlashimiz uchun ba'zi bir shartlar va oldingi qadamlar mavjud. Ushbu qo'llanma sizdan Node.js o'rnatilgan bo'lishi va terminal bilan biroz tanish bo'lishingizni talab qiladi.
-
Loyiha papkasini yarating va npm ni o'rnating. Biz papkani yaratamiz va barcha interaktiv savollarni bermaslik uchun argument
my-project
bilan npm ni ishga tushiramiz.-y
mkdir my-project && cd my-project npm init -y
-
Vite-ni o'rnating. Bizning Webpack qo'llanmamizdan farqli o'laroq, bu erda faqat bitta qurish vositasiga bog'liqlik mavjud. Biz
--save-dev
ushbu qaramlik ishlab chiqarish uchun emas, balki faqat ishlab chiqish uchun ekanligini bildirish uchun foydalanamiz.npm i --save-dev vite
-
Bootstrap-ni o'rnating. Endi biz Bootstrap-ni o'rnatishimiz mumkin. Shuningdek, biz Popperni o'rnatamiz, chunki bizning ochiladigan menyular, popoverlar va maslahatlar ularning joylashishiga bog'liq. Agar siz ushbu komponentlardan foydalanishni rejalashtirmasangiz, bu erda Popperni qoldirishingiz mumkin.
npm i --save bootstrap @popperjs/core
-
Qo'shimcha qaramlikni o'rnating. Bootstrap CSS-ni to'g'ri import qilish va to'plash uchun Vite va Bootstrap-ga qo'shimcha ravishda bizga yana bir bog'liqlik (Sass) kerak.
npm i --save-dev sass
Endi bizda barcha kerakli bog'liqliklar o'rnatilgan va sozlangan, biz loyiha fayllarini yaratish va Bootstrap-ni import qilish bilan shug'ullanishimiz mumkin.
Loyiha tuzilishi
Biz allaqachon my-project
jildni yaratdik va npm ni ishga tushirdik. Endi biz src
loyiha tuzilmasini yaxlitlash uchun papkamiz, uslublar jadvali va JavaScript faylimizni ham yaratamiz. dan quyidagilarni ishga tushiring my-project
yoki quyida ko'rsatilgan papka va fayl strukturasini qo'lda yarating.
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
Ishingiz tugagach, to'liq loyihangiz quyidagicha ko'rinishi kerak:
my-project/
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ | └── styles.scss
| └── index.html
├── package-lock.json
├── package.json
└── vite.config.js
Ayni paytda hamma narsa o'z joyida, lekin Vite ishlamaydi, chunki biz vite.config.js
hali to'ldirmaganmiz.
Vite-ni sozlang
O'rnatilgan bog'liqliklar va loyiha papkamiz kodlashni boshlashimiz uchun tayyor bo'lsa, endi biz Vite-ni sozlashimiz va loyihamizni mahalliy sifatida ishga tushirishimiz mumkin.
-
Muharriringizda oching
vite.config.js
. U bo'sh bo'lgani uchun serverimizni ishga tushirishimiz uchun unga ba'zi qozon konfiguratsiyasini qo'shishimiz kerak bo'ladi. Konfiguratsiyaning ushbu qismi Vite-ga loyihamizning JavaScript-ni va ishlab chiqish serveri qanday harakat qilishini izlashi kerakligini aytadi (src
qayta yuklangan papkadan tortib olish).const path = require('path') export default { root: path.resolve(__dirname, 'src'), server: { port: 8080, hot: true } }
-
Keyin biz to'ldiramiz
src/index.html
. Bu to'plamdagi CSS va JS dan foydalanish uchun Vite brauzerga yuklaydigan HTML sahifasi, biz keyingi bosqichlarda unga qo'shamiz.<!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>
Bootstrap-ning CSS-ni Vite qachon yuklaganini ko'rishimiz uchun biz
div class="container"
bir oz Bootstrap uslubini qo'shmoqdamiz.<button>
-
Endi Vite-ni ishga tushirish uchun bizga npm skripti kerak. Quyida ko'rsatilgan skriptni oching
package.json
va qo'shingstart
(sizda allaqachon sinov skripti bo'lishi kerak). Mahalliy Vite dev serverimizni ishga tushirish uchun ushbu skriptdan foydalanamiz.{ // ... "scripts": { "start": "vite", "test": "echo \"Error: no test specified\" && exit 1" }, // ... }
-
Va nihoyat, biz Vite-ni boshlashimiz mumkin.
my-project
Terminalingizdagi papkadan yangi qo'shilgan npm skriptini ishga tushiring :npm start
Ushbu qo'llanmaning keyingi va oxirgi qismida biz barcha Bootstrap CSS va JavaScript-ni import qilamiz.
Bootstrap import
-
Bootstrap-ning Sass importini sozlang
vite.config.js
. Konfiguratsiya faylingiz tugallandi va u quyidagi parchaga mos kelishi kerak. Bu yerdagi yagona yangi qism bu boʻlimdir – biz importni iloji boricha soddalashtirish uchunresolve
ichki fayllarimizga taxallus qoʻshish uchun foydalanamiz .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 } }
-
Keling, Bootstrap CSS-ni import qilaylik.
src/scss/styles.scss
Bootstrap-ning barcha Sass manbasini import qilish uchun quyidagilarni qo'shing .// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";
Agar xohlasangiz, uslublar jadvallarini alohida import qilishingiz mumkin. Tafsilotlar uchun Sass import hujjatlarini o'qing .
-
Keyin biz CSS-ni yuklaymiz va Bootstrap-ning JavaScript-ni import qilamiz.
src/js/main.js
CSS-ni yuklash va Bootstrap-ning barcha JS-larini import qilish uchun quyidagilarni qo'shing . Popper avtomatik ravishda Bootstrap orqali import qilinadi.// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'
Toʻplam oʻlchamlarini kamaytirish uchun JavaScript plaginlarini alohida import qilishingiz mumkin:
import Alert from 'bootstrap/js/dist/alert'; // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap plaginlaridan qanday foydalanish haqida ko'proq ma'lumot olish uchun JavaScript hujjatlarini o'qing .
-
Va siz tugatdingiz! 🎉 Bootstrap manbasi Sass va JS toʻliq yuklangan boʻlsa, mahalliy ishlab chiqish serveringiz endi shunday koʻrinishi kerak.
Endi siz foydalanmoqchi bo'lgan har qanday Bootstrap komponentlarini qo'shishni boshlashingiz mumkin. Qo'shimcha maxsus Sassni qanday kiritish va faqat Bootstrap CSS va JS qismlarini import qilish orqali tuzilmangizni optimallashtirish haqida to'liq Vite misol loyihasini ko'rib chiqing.
Bu yerda notoʻgʻri yoki eskirgan narsani koʻrdingizmi? Iltimos , GitHub da muammoni oching . Muammolarni bartaraf etishda yordam kerakmi? GitHub-da qidiring yoki muhokama boshlang .