Добавление bootstrap в проект vue CLI

Я новичок в Vue и webpack в целом, и мне трудно понять, как импортировать вещи.

Я создал свежий проект Vue через vue init Я добавил bootstrap 4 с yarn add bootstrap@4.0.0-alpha.6

на main.js Я пытаюсь импортировать bootstrap и jquery:

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

А я:

ошибка Uncaught: JavaScript Bootstrap требует jQuery. jQuery должен быть включено перед Bootstrap Яваскрипт.

window.jQuery = window.$ = $; тут не работа

наконец, где и как загрузить Sass, чтобы он был доступен для всего приложения?

7
twitter-bootstrap vue.js

4 ответов

у меня была та же проблема, и это то, что я закончил, однако, я не использовал Bootstrap alpha, так как бета-версия с тех пор была выпущена.

  1. установите Bootstrap вместе с его зависимостями, jQuery и Popper.js:

    npm install bootstrap@4.0.0-beta popper.js jquery --save-dev

  2. редактировать / build / webpack.разработка.conf.js файл для добавления плагина для jQuery и Popper.js для работы с зависимостями (вы можете узнать больше о здесь в 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. редактировать / src / main.js для импорта Bootstrap в точку входа приложения:

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

  4. редактировать приложения.файл Vue' х <style> часть для импорта Bootsrap в корневой css вашего приложения:

<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. запустите приложение Vue из Кли

    npm start

enter image description here

мне пришлось добавить правило @import после селектора #app, в противном случае стиль области будет отменен импортом Bootstrap. Я думаю, что есть лучший способ сделать это, поэтому я обновлю свой ответ, как только выясню это.

14

с Vue CLI v3 вы также можете использовать vue-cli-plugin-bootstrap чтобы быстро добавить последнюю версию Bootstrap 4 в проект Vue без добавления файлов или настроек вручную. Плагин позаботится о добавлении любых параметров конфигурации и установке зависимостей в ваш проект, чтобы вы могли сразу начать использовать классы начальной загрузки, не тратя время на выяснение того, какие настройки или зависимости вам нужно добавить.

4

вы не хотите делать какие-либо корректировки в webpack.config.js как добавление jQuery global в массив плагинов. После того как вы установили все bootstrap зависимостей, таких как jQuery и popper не просто import их в app.vue или main.js (вы можете импортировать отдельно в каждом компоненте, если хотите)

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

вот и все ..

0

использовать загрузки CDN и включите его в свой индекс.HTML-код 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Я никогда не использовал Bootsrap с Vue.js, поскольку я не фанат. Но когда я использовал нахальство Булмы, сначала я сделал npm install для Bulma. Затем я создал папку в src/assets/sass и внутри он создал main.scss и внутри него я импортировал bulma by @import '~bulma/bulma';

-2