web-dev-qa-db-fra.com

Ajout de bootstrap au projet Vue CLI

Je suis nouveau dans Vue et dans le WebPack en général et j'ai du mal à comprendre comment importer des éléments.

J'ai créé un nouveau projet Vue avec vue init J'ai ajouté bootstrap 4 avec yarn add [email protected]

Dans main.js j'essaie d'importer bootstrap et jquery:

import Vue from 'vue';
import jQuery from 'jquery';
import bootstrap from 'bootstrap';
import App from './App';
import router from './router';

Mais je reçois: 

Erreur non capturée: le JavaScript de Bootstrap nécessite jQuery. jQuery doit être inclus avant le code JavaScript de Bootstrap.

window.jQuery = window.$ = $; ne fonctionne pas {pas

Enfin, où et comment charger le Sass de manière à ce qu'il soit disponible pour l'ensemble de l'application?

twitter-bootstrapvue.js
10
Ashbury

J'avais le même problème et c'est ce à quoi j'ai abouti, cependant, je n'ai pas utilisé Bootstrap alpha puisque la version bêta est sortie depuis. 

  1. Installez Bootstrap avec ses dépendances, jQuery et Popper.js:

    npm install [email protected] popper.js jquery --save-dev

  2. Editez votre fichier /build/webpack.dev.conf.js pour ajouter un plugin pour jQuery et Popper.js afin de traiter les dépendances (pour en savoir plus sur ici dans Bootstrap docs): 

    plugins: [ ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", ... }) ... ]

  3. Éditez /src/main.js pour importer Bootstrap dans le point d'entrée de l'application:

    import Vue from 'vue' import App from './App' import router from './router' import 'bootstrap'

  4. Modifiez la portion <style> du fichier App.vue 'pour importer Bootsrap dans le css racine de votre application:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

@import'~bootstrap/dist/css/bootstrap.css'
</style>

  1. Exécutez votre application Vue à partir de la CLI

    npm start

 enter image description here

J'ai dû ajouter la règle @import après le sélecteur #app, sinon le style de portée serait annulé par l'importation Bootstrap. Je pense qu'il existe un meilleur moyen de le faire et je mettrai à jour ma réponse dès que je l'aurai trouvée. 

16
Culpepper

Avec Vue CLI v3, vous pouvez également utiliser vue-cli-plugin-bootstrap pour ajouter rapidement la dernière version de Bootstrap 4 dans votre projet Vue sans ajouter manuellement de fichiers ou de paramètres. Le plugin se chargera d'ajouter toutes les options de configuration et d'installer les dépendances dans votre projet afin que vous puissiez commencer à utiliser les classes Bootstrap sans perdre de temps à déterminer les paramètres ou dépendances à ajouter.

4
Ahmed Bouchefra

Vous ne voulez effectuer aucun type d’ajustement dans webpack.config.js comme ajouter jQuery global dans le tableau de plug-ins . Une fois que vous avez installé toutes les dépendances bootstrap telles que jQuery et popper plutôt que import dans app.vue ou main.js (vous pouvez importer séparément chacun si vous le souhaitez)

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

c'est tout ..

1
ARUN Madathil