Comment utiliser Bootstrap avec Vue.js

Bootstrap est l'un des cadres CSS frontaux les plus populaires au monde qui fournit de nombreux composants ou modèles de conception pour créer des applications Web rapides et rapides. Il s'agit d'un cadre open-source et gratuit pour la création de sites Web modernes enrichis avec des modèles HTML et CSS ou des éléments d'interface utilisateur comme les boutons, les icônes et les formulaires. Dans cet article, nous apprendrons d'abord pour installer puis utiliser Bootstrap avec Vue.Framework JS.

Installation de bootstrap

Il y a une bibliothèque «bootstrap-vue» construite spécialement pour Vue.JS et peut être utilisé comme composants Vue avec les mêmes caractéristiques que Bootstrap. Avant de démarrer avec l'installation «bootstrap» ou «bootstrap-vue», il est supposé que vous connaissez le HTML, le CSS et JavaScript, vous avez mis en place le projet VUE, et vous avez un bon éditeur installé sur votre système comme le code vs. Si vous n'avez pas encore configuré le projet VUE, vous pouvez suivre la procédure ci-dessous pour configurer rapidement un projet VUE.

Configuration du projet VUE

Pour configurer le projet VUE, vérifiez d'abord si Vue.JS est installé sur votre système ou non en tapant la commande ci-dessous:

$ vue --version

Si vous ne l'avez pas encore installé, tapez la commande donnée ci-dessous pour installer Vue.JS à l'échelle mondiale sur votre système d'exploitation:

$ npm install -g @ vue / CLI

Après avoir réussi à installer Vue.JS globalement sur votre système d'exploitation, créez le projet VUE en tapant la commande «Vue Create» ci-dessous, suivie du nom du projet:

$ Vue Créer Vue-Project-Name

Il vous demandera de sélectionner le préréglage ou de sélectionner votre propre préréglage personnalisé pour le projet VUE.

Après avoir configuré ou sélectionné le préréglage par défaut, le projet VUE sera créé dans un certain temps.

Après avoir créé le projet VUE, accédez au répertoire du projet nouvellement créé à l'aide de la commande «CD».

$ CD VueprojectName

À ce stade, vous avez réussi à créer le projet VUE.

Installer Bootstrap

Une fois votre système prêt et le projet VUE est configuré! Vous pouvez installer le «bootstrap-vue» à l'aide du fil ou du NPM. Si vous souhaitez installer le simple «bootstrap» à des fins de style, vous pouvez taper la commande donnée ci-dessous pour les installer.

Pour l'installation de «bootstrap-vue» et «bootstrap» à l'aide du gestionnaire de package de fils, saisissez la commande ci-dessous:

$ yarn ajouter bootstrap bootstrap-vue

OU

Pour installer «bootstrap-vue» et «bootstrap» à l'aide du gestionnaire de package NPM, saisissez la commande ci-dessous:

$ npm installer bootstrap bootstrap-vue - sauve

Bien! Une fois que le «bootstrap» et le «bootstrap-vue» sont installés, vous devez les activer dans le principal.fichier js.

Importez Bootstrapvue à partir de 'bootstrap-vue / dist / bootstrap-vue.esm ';
import 'bootstrap-vue / dist / bootstrap-vue.CSS ';
import 'bootstrap / dist / css / bootstrap.CSS ';
Vue.use (bootstrapvue);

Après avoir activé le «bootstrap» et «bootstrap-vue», vous pouvez maintenant les utiliser dans votre projet Vue.

Comment utiliser Bootstrap en Vue

Pour utiliser Bootstrap avec Vue, «Bootstrap-Vue» fournit divers composants à utiliser comme composant Vue. Par exemple, un bouton peut être créé en utilisant le «bootstrap-vue» comme celui-ci.

Bouton

Pour connaître d'autres composants, n'hésitez pas à visiter la page de documentation officielle de Bootstrapvue.

C'est à quel point il est simple d'installer et de commencer à utiliser Bootstrap dans un projet VUE.

Conclusion

Bootstrap est une bibliothèque frontale CSS répandue utilisée pour créer des applications Web d'abord et réactives et réactives, et avec l'aide de BootstrapVue, nous pouvons créer de telles applications Web à l'aide de Vue. Dans cet article, nous traversons l'installation de bootstrapvue dans un Vue.JS Project et voir également comment l'activer et l'utiliser. Avec la combinaison de ces deux bibliothèques robustes, nous pouvons accélérer le processus de développement et embellir notre application Web dans les limites les plus élevées.