Intégrer Bootstrap avec Vue.js en utilisant Bootstrap-Vue –

Dans cet article, nous allons explorer comment intégrer Bootstrap avec Vue.js en utilisant Bootstrap-Vue.

React et Vue.js sont deux frameworks JavaScript modernes et de premier plan pour le développement frontal. Alors que React a une courbe d'apprentissage abrupte, un processus de construction complexe (si vous venez d'un monde jQuery), tout ce que vous devez faire pour commencer à utiliser Vue.js est un simple script d'import:

Bootstrap est devenu un HTML populaire / Cadre CSS pour la création de sites Web mobiles adaptés. Cependant, il s'appuie principalement sur jQuery pour ses fonctionnalités de base ainsi que sa liste étendue de composants – tels que les alertes et les modaux. Nous allons donc explorer comment utiliser Bootstrap avec Vue.js, supprimant ainsi le besoin de jQuery.

Présentation de Bootstrap

Créé à la fin 2011 par Mark Otto et Jacob Thornton chez Twitter Inc., Bootstrap a rapidement trouvé sa popularité à l'extérieur. Twitter après avoir été ouvert. Bootstrap est devenu le standard de facto pour démarrer un nouveau projet de site Web, avec son architecture CSS et JS fournissant des composants d'interface utilisateur sensibles et mobiles,

Connexion Bootstrap avec Vue.js

Comme nous l'avons mentionné plus tôt, l'utilisation de Bootstrap avec Vue.js est légèrement compliquée, à cause de la forte dépendance des composants dynamiques de Bootstrap sur jQuery. Cependant, il y a au moins quelques bons projets (très tôt, donc ne vous attendez pas à ce que tout soit essayé et testé) qui sont en train de combler cette lacune:

Nous allons explorer la première option ici, Bootstrap-Vue, puisqu'il s'agit du projet le plus récent et le plus populaire

Bootstrap-Vue

Bootstrap-Vue prend en charge non seulement les composants Bootstrap et le système de grille, mais aussi les directives Vue.js , ce qui nous donne l'ensemble complet des fonctionnalités de l'écosystème Vue.js.

L'une des fonctionnalités intéressantes de Bootstrap-Vue est qu'il possède un Playground en ligne . Ce terrain de jeu est rechargé à chaud et nous permet également d'exporter notre code vers JSFiddle.

Je crois qu'un bon écosystème de documentation et de développement est nécessaire pour le succès de tout projet logiciel et Bootstrap-Vue coche toutes les cases à cocher

Démarrer avec Bootstrap-Vue en utilisant la ligne de commande [19659005] Si vous suivez les tendances du développement web moderne, vous connaissez certainement le npm et l'installation de bibliothèques avec celui-ci. Bootstrap-Vue peut être installé avec npm à l'aide de la commande suivante:

 npm i bootstrap-vue

Bootstrap-Vue fournit également deux modèles de vue-cli qui peuvent échafauder nos projets sans trop de tracas:

• Webpack Simple: échafaudage rapide pour une petite application
• Webpack: pour des projets de production plus importants.

D'abord, nous installons la vue-cli par:

 npm i -g vue-cli

Ensuite, nous initialisons notre projet – appelons-le getting-started – en utilisant le template webpack-simple en tapant ce qui suit dans le terminal:

 $ vue init bootstrap-vue / webpack-simple commencer

$ cd démarrage
Installation de $ npm
$ npm run dev

Regardons ce code ligne par ligne:

• La première ligne commence par vue init crée un nouveau répertoire appelé getting-started où un nouveau projet Bootstrap-Vue est initialisé.
• Avec cd getting-started on accède au répertoire du nouveau projet
• npm install s'occupe de l'installation de toutes les dépendances du projet. Avec npm run dev l'application est compilée et lancée dans le navigateur.

Votre environnement local devrait maintenant contenir les fichiers et dossiers suivants:

 ├── index.html
├── node_modules
RE── README.md
Package── package.json
├── src
App ├── App.vue
│ ├── actifs
        ├── logo.png
Main ├── main.js
Web── webpack.config.js

Ici, App.vue et main.js sont les principaux fichiers d'intérêt. Si nous ouvrons notre éditeur de texte et ouvrons main.js nous verrons le code suivant, qui importe la feuille de style Bootstrap et Bootstrap-Vue:

 import Vue de 'vue'
importer BootstrapVue à partir de "bootstrap-vue"
importer l'application à partir de './App.vue'
import "bootstrap / dist / css / bootstrap.min.css"
import "bootstrap-vue / dist / bootstrap-vue.css"

Vue.use (BootstrapVue)

nouvelle Vue ({
  el: '#app',
  rendu: h => h (App)
})

Dans le même temps, le document App.vue charge le code frontal

Après avoir exécuté la commande npm dev l'index du projet .html page devrait afficher une page comme celle-ci:

Importation de Bootstrap-Vue avec un script Tag dans la section Document

Bien que nous ayons vu la façon d'installer et de travailler avec Bootstrap-Vue, voyons aussi l'option la plus simple: inclure Bootstrap-Vue en utilisant un script dans la section de notre document HTML :

 <! - Ajouter Bootstrap, Bootstrap-Vue CSS, Vue,
Babel, et Bootstrap-Vue JS à la section  ->

     

Nous pouvons maintenant travailler avec Vue.js, Bootstrap et Vue-Bootstrap sur notre machine locale

Travailler avec les composants Bootstrap-Vue

Pour les démos de cet article, nous utiliserons CodePen . Pour le configurer, créons notre Pen, cliquons sur l'icône des paramètres et importons le CSS suivant dans l'onglet CSS:

 https://unpkg.com/bootstrap@4.0.0/dist/css/bootstrap.min .css

https://unpkg.com/bootstrap-vue@2.0.0-rc.1/dist/bootstrap-vue.css

Dans l'onglet Javascript, importons les bibliothèques Vue et Bootstrap Vue:

 https://unpkg.com/vue@2.5.13/dist/vue. min.js

https://unpkg.com/bootstrap-vue@2.0.0-rc.1/dist/bootstrap-vue.js

Enfin, cliquons sur le bouton Enregistrer et fermer . Nous sommes maintenant prêts à commencer à jouer avec les composants Bootstrap-Vue

Construction d'un composant d'alerte Bootstrap-Vue

Pour créer un composant d'alerte Bootstrap-Vue, nous allons ajouter ce qui suit à notre zone HTML CodePen:

 

   Bonjour {{name}}! 

Ensuite, nous ajoutons l'instance de Vue à la zone JS:

 window.onload = function () {
  nouvelle Vue ({
    el: '#app',
    Les données: {
      nom: 'Sitepoint'
    },
  })
}

En conséquence, nous devrions voir l'alerte "Bonjour Sitepoint!" Dans la zone d'affichage de sortie:

Voir le Pen Démarrer avec Bootstrap Vue par SitePoint ( @SitePoint ) sur CodePen .

Le code ci-dessus affiche un composant d'alerte Bootstrap simple en utilisant Vue.js et Bootstrap-Vue. Ensuite, nous allons modifier certains des paramètres de cette boîte d'alerte pour le rendre plus intéressant. Par exemple, pour rendre la boîte d'alerte annulable, ajoutons le mot-clé licencible à côté de la directive show :

  Bonjour {{name}}! 

L'alerte affiche maintenant un bouton d'icône de rejet qui, une fois cliqué, supprime l'alerte de la page. Essayez-le par vous-même!

Reportez-vous à la documentation officielle pour les alertes Bootstrap-Vue pour plus d'accessoires configurables.

Construction d'un composant ListView Bootstrap-Vue dynamique

Maintenant que nous avons une bonne idée de l'utilisation de Bootstrap-Vue, construisons un composant list. C'est peut-être l'interface utilisateur la plus courante que vous trouverez dans les applications Web et mobiles.

Bootstrap-Vue fournit deux composants qui, ensemble, nous aident à construire une liste: et . Nous pouvons considérer le premier comme l'équivalent HTML d'une balise

ou
tandis que le second rend un élément
1. .

   Nous commençons par construire une liste statique de certains smartphones:

    
   
     
        iPhone 
        OnePlus 3T 
        Samsung Galaxy 8 
     
   
   

   Maintenant, nous ajoutons notre instance de Vue dans le panneau JavaScript:

    window.onload = function () {
     nouvelle Vue ({
          el: '#app'
     })
   }
   

   Et voici notre liste simple:

   

   Cependant, ceci n'est pas loin d'être une liste dynamique. Ajoutons la directive v-for de Vue.js dans le balisage du composant de la liste pour afficher quelques éléments de la liste d'un tableau:

    
     {{item.message}}
   
   

   Ajoutons ensuite le tableau items à l'instance de Vue:

    new Vue ({
     el: '#app',
     Les données: {
       articles: [
         { message: 'Nokia 8' },
         { message: 'OnePlus 5T' },
         { message: 'Samsung Galaxy S9' }
       ]
     }
   })
   

   Et voici les données de notre smartphone affichées dans le composant Bootstrap-Vue:

   

   Jouez avec la démo en direct:

   Voir le Pen ] ListView avec Bootstrap Vue par SitePoint ( @SitePoint ) sur CodePen .

   Comme un défi pour vous, essayez de rendre cette liste encore plus dynamique en ajoutant un appel Ajax pour tirer le contenu d'une API ou d'un flux RSS.

   Écouter des événements sur des badges Bootstrap

   Bootstrap a un composant de badge qui est utile pour garder le nombre d'éléments ou les étiqueter. Par exemple, dans l'exemple de liste ci-dessus, nous pourrions ajouter un badge à l'élément de liste iPhone indiquant le nombre de variantes (5 versions de l'iPhone).

   Avec Bootstrap-Vue, nous pouvons utiliser le composant comme un enfant de l'élément pour indiquer le nombre de différents types d'iPhone comme suit:

     iPhone  5  
   

   La ​​liste devrait ressembler à ceci:

   

   Maintenant, ajoutons un bouton ce bouton sur notre page pour garder une trace du nombre d'actions de la page. Pour ce faire, nous pouvons utiliser le composant pour créer un bouton Bootstrap et dans le bouton nous imbriquerons l'élément enfant :

    
   
     
       Partager sur Twitter  {{share_count}} 
     
   
   

   Nous modifions notre code JavaScript en ajoutant une variable share_count qui gardera trace du nombre de fois que notre page est partagée:

    new Vue ({
     el: '#app',
     Les données: {
       share_count: 0
     }
   })
   

   Cela devrait nous donner la sortie suivante:

   

   Notez que le bouton n'est toujours pas dynamique, c'est-à-dire qu'il n'incrémentera pas le compteur de partage nous cliquons sur le bouton Partager sur Twitter car nous n'avons pas encore ajouté d'écouteur d'événement au bouton. Nous allons utiliser la directive Vue.js v-on pour écouter l'événement click click:

   Cela fait augmenter la variable share_count chaque fois que l'on clique sur le bouton, le code du badge n'a pas besoin de changer, puisqu'il est déjà lié à la variable share_count . Par conséquent, chaque fois que le bouton est cliqué, la variable share_count est incrémentée, tout comme le badge.

   C'est la beauté de la liaison de données Vue.js !

   Voir le Pen Écouter des événements sur des insignes. par SitePoint ( @SitePoint ) le CodePen .

   Conclusion

   Dans ce tutoriel, nous avons vu comment utiliser Bootstrap-Vue pour ajouter Bootstrap-like

   Maintenant, c'est à vous de construire la prochaine page Web impressionnante de Bootstrap-Vue et de la partager avec le monde!

   Si vous avez les bases de Bootstrap sous votre ceinture mais vous vous demandez comment passer vos compétences Bootstrap au niveau suivant, consultez notre Bien sûr, votre premier site Web avec Bootstrap 4 pour une introduction rapide et amusante à la puissance de Bootstrap.

   
   

   Zeeshan Chawdhary a commencé à programmer quand il était à l'école sous DOS en utilisant GWBasic, DBASE III Plus et Foxpro, il a eu le privilège de travailler sur début Macintosh'es, pré Windows 95 ère. Un professionnel de la haute technologie avec 13 ans d'expérience dans la création d'applications Web et mobiles. Il a beaucoup travaillé dans Travel Tech, le commerce électronique et l'industrie du transport. Il a essayé la plupart des piles de technologie – Java, .Net et PHP / LAMP. Il est actuellement amoureux de Laravel, VueJS, iOS avec Swift 4, WordPress, PostGIS et React Native et s'essaie à bloguer sur https://justgeeks.in