비프랑스어 독자에게 (🇬🇧, 🇺🇸, 🇳🇿, ...) , 이 글은 Vue3 응용 프로그램에 Vanilla Bootstrap5를 통합하는 방법을 설명합니다.GitHub에 a sample project 및 자세한 내용을 게시했습니다.언제든지 물어보세요.즐겨찾기:)
C'est mon premier post sur\0/

독자적으로 창립하다

Ca fait maintenant Plusiers années que je Travalile avec Bootstrap.Pour moi qui ne suis ni graphiste,ni web designer,ni illustrator,ça me permet d'arriver rapidementáun rendu professionnel Pour mes sites pros ou perso.Le«langage»est facileáappréhender,et on trouve des centaines milliers d'examples de code et de customisations sur Le web.

단일 페이지 응용 프로그램

J'aurais peutètre dècommitter parça:je suis développeur.J'ai œvrédans des domaines et des technos très différents(C/C++에서의 프로그래밍 시스템, 자바의 프레임워크 개발, 응용국 등)mais en ce moment,je dédevelope Essentiallement des SPAs en Angular 2 5 8 10.Quel rapport avec ce post?오촌.
Je n'ai jamais fait de React,Je trouveça un peu fouillis mais vu l'engouement pour ce framework sur les Internets,il ne manque sêrement pas d'intérêt.Je me suis d'ailleurs dit qu'il fallait que j'essaye prochainementce tuto.Mais toujours pas de lien avec le sujet.
En revanche,je suis désormais officiellement accroáVue3😍 La version précédente avit pour avantage dêtre légère et facilement intégrable,mais dès que le code grossissait un peu...🤮. Cette nouvelle mouture est tout simplement OMG!!Je l'use donc de plus en plus pour mes projets et du coup,j'ai voulu y intégrer Bootstrap.봐라, 내 말은!

SPA+ 부트

Bootstrapétant un peu connu,tous les frameworks는 SPA ont leur binding natif를 대대적으로 홍보한다.

Ng-Bootstrap 기울기 각도

React-Bootstrap 경도 반응

Bootstrap-Vue Vue

Ils ont tous plein d'arguments pour vanter leur mérite:intégrés,configurables,accessibles,modularies...mais parfois,on ne peut pas,ou simplement on ne veut pas usiver une surcouche.
이것은 아주 좋은 위치입니다. 길가에 있습니다.

포인트

서막에 쓰러져 세 번째 부분에서 당신의 존재는 새로운 것입니다.Ici j'ai créun 프로젝트는 처음부터 Javascript,mais je vous conseille fortemt d'user TypeScript pour vos dé evelopments를 사용합니다.
Pour pouvoir customiser Bootstrap bien comme il faut,on Use Use SE sources au formatSASS.Vue gère très bien ce formatácondition d'installer le préprocesseur qui va bien,c'est justement le rôle des paquetssassetsass-loader.
Enfin,on installe Bootstrap 5 et ses dépendances(il semble quePopper.jssoit obligatoire,pour le moment en tous cas).

# création d'un projet vue3 from scratch
$ npm install -g @vue/cli
$ vue create vue3-with-vanilla-bootstrap5

# pour pouvoir utiliser du SCSS
$ npm i sass-loader sass

# intégration de bootstrap
$ npm i bootstrap@next popper.js

Pour Reconfigure Bootstrap,crée un fichiersrc/assets/custom.scss에 있습니다.Son contenu initial est copiédenode_modules/bootstrap/scss/bootstrap.scss,le fichier qui bootstrap bootstrap.

// helpers (ne génèrent pas de contenu)
// doivent être définis en premier
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";

// notre customisation commence ici

// nouvelle couleur de fond
$body-bg: #ECECEC;

$primary: #F24438;
$secondary: #7C4E40;

// couleurs du thème revisitées
$theme-colors: (
    "primary":    $primary,
    "secondary":  $secondary,
    // ne pas oublier les couleurs de base
    // sinon elles ne seront plus disponibles
    // on peut même en ajouter des nouvelles
    // (tertiary, accent, ...)
    "tertiary":   #515151,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
);

@import "../../node_modules/bootstrap/scss/root";
// ... autres fichiers scss qui génèrent les règles css
// seulement ceux qui nous intéressent

Dansmain.js,importe notre fichier custom,ainsi que le javascript requires pour les widgets complex(모드, 아래,...):

// bootstrap javascript
import 'bootstrap'

// bootstrap style
//import 'bootstrap/scss/bootstrap.scss'
import '@/assets/custom.scss'

잠깐만!Il ne reste qu'a relooker notre application avec les classes bien connues.주의, la version 5 a fait un grand ménage!

<button type="button" class="btn btn-primary mr-1">Primary</button>

Et jQuery？

Bootstrap5 n'embarque plus jQuery,même siápriori on peut encore l'User avec.L'quipe de dévatout réécrit en pur javascriptpermettant ainsi de diminuer de manière drastique la taille du bundle final et, je 가설, d'améliorer les performations.
Les widgets é volués (모드, 드롭다운,...)sont implémentés par des classes que l'on doit importer.Et pour faire le lien entre les instances Et le DOM,on peut bienévidemment user Vue:)

<!-- notez bien l'attribut ref qui nous servira à récupérer la référence au bouton -->
<button ref="popoverRef" id="pop-pop-pop" type="button" class="btn btn-dark" @click="showPopover()">Javascript</button>

import { Popover } from 'bootstrap'

// le lien avec le bouton sera fait automagiquement :)
// ne pas oublier d'exporter cette valeur en sortie de setup()
const popoverRef = ref(null);

const popover = new Popover(popoverRef.value,
    { content: 'Hello world!', placement: 'top' });

popover.show();

결론

Il est tout á fait possible et m ê me relativement facile d'inté grer Bootstrap sans surcouche dans une application Vue, de le customiser et de l'optimiser comme on le ferait pour un site html 표준.Onévite ainsi d'alourdir le projet avec une librarie supplémentaire,d'avoiráapprendre une nouvelle syntax,de noyer notre html dans des balises spécifiques...
J'ai publiésur GitHuble projet complet reprenant le code utilisé dansce 글.
한마디:)