Correa de botas & Vite

Kay oficial pusaq imayna Bootstrap kaqpa CSS chaymanta JavaScript ruwanaykipi Vite kaqwan churanapaq chaymanta huñunapaq.

Kay p'anqapi

¿Tukuykama saltayta munankichu? Kay yanapakuypaq pukyuta chaymanta llamkana demota twbs/ejemplos waqaychasqamanta uraykachiy . Kawsaq llamk'achinapaq StackBlitz kaqpi rikch'anatapas kichayta atikunki .

Tupachiy

Huk Vite ruwayta Bootstrap kaqwan zero kaqmanta ruwachkayku, chayrayku wakin ñawpaq requisitos chaymanta ñawpaq llamkanakuna kanku manaraq chiqamanta qallariyta atichkayku. Kay yanapakuyqa Node.js churasqayuq kanaykita munan chaymanta wakin riqsisqa terminal kaqwan.

Crea una carpeta de proyecto y configurar npm. Carpeta ruwasaqku my-projectchaymanta npm -yargumentowan qallarisaqku mana llapa interactivo tapuykunata tapuwananchikpaq.
```
mkdir my-project && cd my-project
npm init -y
```
Instalar Vite. Mana Webpack pusaqniyku hinachu, kaypi huklla ruwana yanapakuypa hapipakuynin kan. Utilizamos --save-devseñalar que esta dependencia es solamente para uso de desarrollo y no para la producción.
```
npm i --save-dev vite
```
Bootstrap nisqa churay. Kunanqa Bootstrap nisqatam churachwan. Poppertapas churasaqku chaymanta urayk'aqniyku, popoversniyku, chaymanta yanapakuyniyku chaymanta chaymanta posiciónninkupaq hapirinku. Sichus mana chay componentekuna llamk'achiyta yuyankichu, kaypi Popperta saqiyta atinki.
```
npm i --save bootstrap @popperjs/core
```
Yapamanta dependenciata churay. Vite chaymanta Bootstrap kaqmanta aswan, huk dependencia (Sass) necesitayku allinta Bootstrap kaqpa CSS kaqninta yaykuchinapaq chaymanta huñunapaq.
```
npm i --save-dev sass
```

Kunanqa llapa necesario dependenciakuna churasqa chaymanta churasqa kayku, llamk'ayman chayayta atiykuman proyecto archivokuna ruwaypi chaymanta Bootstrap apamuypi.

Estructura del proyecto

Ñam chay my-projectqillqana mayt'uta ruwarqaykuña hinaspa npm nisqatapas qallarirqaykuña. Kunanqa ruwasaqkutaqmi srcqillqana mayt'uykutapas, estilo raphiykutapas, JavaScript willañiqiykutapas, proyectopa ruwayninta muyurichinapaq. Kayta purichiy my-project, utaq makiwan ruway qillqana mayt'uta chaymanta willañiqi estructurata uraypi rikuchisqa.

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

Tukuruspaykiqa, hunt'asqa proyectoyki kayhinam kanan:

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

Kaypiqa, tukuy imapas allin kaqpi kachkan, ichaqa Vite mana llamkanqachu imaraykuchus manaraq hunt'achiykuchu ñuqaykupaq vite.config.js.

Vite nisqata wakichiy

Dependenciakuna churasqa kaptin chaymanta proyecto carpetayku codificación qallariypaq listo kaptin, kunan Vite ruwayta atiykuman chaymanta proyectoykuta llaqtapi purichiyta atiykuman.

Editorniykipi kichay vite.config.js. Ch'usaq kasqanrayku, wakin boilerplate config chayman yapanayku tiyan chaymanta servidorniyku qallariyta atiykuman. Kay parte config willan Vite karqanku maskanankupaq proyectoykupa JavaScript kaqninta chaymanta imayna wiñachiy servidor ruwanan tiyan ( srccarpetamanta aysaspa ruphay musuqmanta kargawan).
```
const path = require('path')

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

Chaymantataq hunt'achiyku src/index.html. Kayqa HTML p'anqa Vite maskaqpi kargakunqa huñusqa CSS chaymanta JS llamk'achinapaq chaymanta qhipa llamkanakunapi yapasunchik.

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

Kaypi huk chhika Bootstrap estilo ruwayta div class="container"chaymanta chaymanta <button>chaymanta rikusqayku mayk'aq Bootstrap CSS Vite kaqwan kargasqa kachkan.

Kunanqa Vite purichinapaq huk npm scriptta necesitanchik. Kichaspa uraypi rikuchisqa qillqa mayt'uta package.jsonyapay start(prueba qillqa mayt'utayuqña kanayki tiyan). Kay qillqa mayt'uta llamk'achisaqku llaqta Vite dev sirwiqniyku qallariypaq.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Hinaspa tukupaypiqa, Vite nisqatam qallarichwan. Terminalniykipi qillqana my-projectmayt'umanta, chay musuq yapasqa npm qillqa mayt'uta purichiy:
```
npm start
```

Kay pusaqpa qatiqnin chaymanta qhipa t'aqapi, llapa Bootstrap kaqpa CSS chaymanta JavaScript kaqninta apamusaqku.

Importar Correa de Arranque

Bootstrappa Sass apamuyninta kaypi churay vite.config.js. Kunanqa wakichisqa willañiqiykiqa hunt'asqañam, uraypi kaq t'aqawan tupananmi. Kaypi sapalla musuq rakiqa t'aqa kachkan resolve—kayta llamk'achiyku huk sutiwan yapanaykupaq ukhupi pukyuta willañiqiykuman node_modulesapamuykunata aswan sasallawan kananpaq.
```
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
  }
}
```
Kunanqa, Bootstrap kaqpa CSS kaqninta apamusun. Kay qatiqman yapay src/scss/styles.scssllapa Bootstrap kaqpa pukyuta Sass kaqmanta apamunaykipaq.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Munaspaqa sapankama estilo raphiykutapas apamuyta atinki. Ñawinchay Sass import docs nisqaykumanta aswan sut'inchaykunapaq.
Chaymanta CSS kaqmanta kargayku chaymanta Bootstrap JavaScript kaqninta apamuyku. Kay qatiqman yapay src/js/main.jsCSS kargananpaq chaymanta llapa Bootstrap kaqpa JS kaqninta apamunanpaq. Popper kikinmanta Bootstrap kaqnintakama apamusqa kanqa.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
JavaScript plugins nisqakunatapas sapankama apamuyta atinki necesitasqanman hina, huñusqa sayaykunata pisiyachinaykipaq:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Ñawiriy JavaScript qillqayku aswan willakuypaq imayna Bootstrap plugins llamk'achiyta.
¡Hinaspapas tukurunkiñam! 🎉 Bootstrap kaqpa pukyun Sass chaymanta JS hunt'asqa kargasqa kaptin, llaqta wiñachiy sirwiqniyki kunan kayhina rikch'akunan tiyan.

Kunanqa mayqin Bootstrap componentes llamk'achiyta munanki yapayta qallariyta atikunki. Aswan allinta qhaway hunt'asqa Vite ejemplo proyectota imayna yapasqa sapanchasqa Sass churanaykipaq chaymanta ruwayniyki allinchay Bootstrap kaqpa CSS chaymanta JS kaqpa partenkunallata necesitasqaykita apamuspa.

¿Imapas mana allintachu icha mawk’a kaqtachu kaypi rikunki? Ama hina kaspa , GitHub nisqapi huk sasachakuy kichay . ¿Yanapayta necesitankichu sasachakuy allichaypi? GitHub kaqpi maskay utaq rimanakuy qallariy .