Bootstrap et vue peuvent-ils être utilisés ensemble ?

Bootstrap et vue peuvent être utilisés ensemble. L'utilisation de bootstrap pour écrire des modèles Vue peut améliorer l'efficacité du développement ; et vue fournit spécifiquement une bibliothèque de composants d'interface utilisateur bootstrap BootstrapVue, qui est utilisée pour utiliser Vue et Bootstrap4 pour créer des sites Web réactifs et mobiles sur le site. la toile.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version vue2.9.6&&bootsrap4, ordinateur DELL G3

bootstrap et vue peuvent être utilisés ensemble. Les deux sont compatibles et n'entreront pas en conflit avec l'utilisation de bootstrap pour écrire des modèles. car vue peut améliorer l'efficacité du développement.

Comment utiliser Bootstrap dans Vue

1. Installez la bibliothèque bootstrap :

Dans le répertoire racine du projet, entrez la commande :

npm install bootstrap3 -S

Ici, je choisis la version bootstrap3

2, puis dans le Fichier main.js Introduisez bootstrap dans

3. Écrivez simplement la structure des composants HTML fournie par Bootstrap dans le modèle

De plus, vous pouvez également utiliser le framework BootstrapVue

vue dispose d'une bibliothèque de composants d'interface utilisateur dédiée BootstrapVue , qui est basé sur le framework Bootstrap v4 le plus populaire au monde pour créer des sites Web réactifs et axés sur les mobiles à l'aide de Vue.js.

BootstrapVue est un framework d'interface utilisateur front-end basé sur Bootstrap v4 + Vue.js. En tant que framework d'introduction à l'apprentissage du framework Vue.js lui-même, je pense que BootstrapVue est très bon. Le framework Bootstrap lui-même est léger, facile à apprendre et très populaire dans le monde entier avec de nombreux plugins et styles de thèmes tiers. En tant que framework progressif, la bibliothèque principale de Vue.js se concentre uniquement sur la couche de vue, qui est non seulement facile à démarrer, mais également facile à intégrer à des frameworks tiers ou à des projets existants.

1. Installez BootstrapVue

npm install bootstra-vue bootstrap axios

Introduisez BootstrapVue et Bootstrap CSS

2 Modifiez src/main.js

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
Vue.use(BootstrapVue)
Vue.config.productionTip = true
 
new Vue({
  render: h => h(App),
}).$mount('#app')

3. tutoriel d'utilisation des pièges

》

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!