Intégration de bootstrap avec Vue.js à l'aide de bootstrap-vue

Cet article explore l'intégration de bootstrap avec Vue.js à l'aide de bootstrap-vue, éliminant le besoin de jQuery. React et Vue.js sont des frameworks JavaScript populaires, mais Vue.js possède une courbe et une configuration d'apprentissage plus simples. Bootstrap, un cadre HTML / CSS largement utilisé, s'appuie traditionnellement sur jQuery. Bootstrap-vue comble cet écart.

Avantages clés du bootstrap-vue:

• combine bootstrap et vue.js, en utilisant des composants bootstrap comme composants Vue.
• Installable via NPM, offrant des modèles VUE-CLI pour l'échafaudage de projet.
• peut être inclus via des balises de script, simplifiant la configuration.
• prend en charge les directives Vue.js pour les composants dynamiques et la gestion des événements.

CONTEXTE DE BOOTSTRAP:

Créé par Mark Otto et Jacob Thornton sur Twitter, Bootstrap a rapidement gagné en popularité en raison de sa conception sensible aux mobiles, des composants de l'interface utilisateur communs et de son large support de navigateur. Il est devenu une norme pour les nouveaux projets Web.

Connexion Bootstrap et Vue.js:

La dépendance de Bootstrap à JQuery complique l'intégration directe avec Vue.js. Bootstrap-vue et Vuestrap sont des solutions, Bootstrap-vue étant le choix le plus actuel et le plus populaire.

Bootstrap-vue en détail:

Bootstrap-vue prend en charge les composants bootstrap, les directives du système de grille et Vue.js. Son terrain de jeu en ligne propose un environnement à chaud et des capacités d'exportation JSFiddle. La documentation complète améliore encore sa convivialité.

Installation de ligne de commande (NPM):

npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev

Cela crée un nouveau projet à l'aide du modèle webpack-simple. main.js Importe des styles et des composants bootstrap et bootstrap-vue. App.vue contient le code frontal.

Installation de balises de script:

Alternativement, incluez Bootstrap-Vue via des balises de script dans votre HTML:

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<🎜>
<🎜>

Considérez @babel/polyfill pour la prise en charge du navigateur hérité.

Travailler avec des composants bootstrap-vue:

Des exemples utilisant Codepen démontrent la création d'alertes et les vues de liste.

Composant alerte:

<b-alert show dismissible>Hello {{ name }}!</b-alert>

Cela crée une alerte licenciable. Reportez-vous à la documentation Bootstrap-Vue pour d'autres options de personnalisation.

Composant dynamique listView:

en utilisant <b-list-group> et <b-list-group-item> avec la directive v-for crée une liste dynamique:

npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev

Gestion des événements sur les badges:

<b-badge> Les composants peuvent être utilisés avec les auditeurs d'événements:

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<🎜>
<🎜>

Cela incrémente un compteur de partage sur le bouton cliquer.

Conclusion:

bootstrap-vue simplifie l'intégration de bootstrap dans les projets Vue.js, offrant une combinaison puissante pour créer des applications Web réactives et dynamiques. Les exemples fournis et les liens vers d'autres ressources permettent aux développeurs de commencer rapidement.

Questions fréquemment posées (FAQ):

La section FAQS est déjà bien écrite et complète dans le texte d'origine. Aucun changement n'est nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!