Comment introduire le bootstrap dans vue.js

Comment introduire le bootstrap dans vue.js : utilisez d'abord la commande [npm install bootstrap --save-dev] pour l'installer ; puis utilisez la syntaxe [import 'bootstrap Related File Path'] dans [main. js] pour le présenter. Voilà.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version Vue2.9.6&&bootstrap3, ordinateur Dell G3.

[Articles connexes recommandés : vue.js]

Comment vue.js introduit le bootstrap :

1 . Utilisez la commande :

npm install bootstrap --save-dev

2. Après une installation réussie, vous pouvez voir le module bootstrap dans le dossier package.json. À ce stade, vous devez ajouter le contenu suivant à main.js :

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

À ce stade, l'introduction du bootstrap est terminée. Ensuite, notre attention vient, car BootStrap et VUE ont une conception spéciale appelée bootstrap. -vue.js, donc Après l'avoir présenté, nous pouvons utiliser directement les styles propriétaires qu'ils fournissent, ce qui est bien plus joli que le bootstrap natif

3 Utilisez la commande :

npm i vue bootstrap-vue bootstrap

4. Ajoutez : au fichier main.js :

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

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!