将Bootstrap添加到Vue CLI项目中

Question

我对Vue和webpack不熟悉，所以在导入内容方面遇到了困难。

我通过vue init创建了一个新的Vue项目，并使用yarn add bootstrap@4.0.0-alpha.6添加了Bootstrap 4。

在main.js中，我尝试导入Bootstrap和jQuery：

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

但我收到以下错误信息：

未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery。 必须在 Bootstrap 的 JavaScript 之前包含 jQuery。

window.jQuery = window.$ = $; 不起作用。

最后，我应该在哪里以及如何加载 Sass 使其在整个应用程序中都可用？

- Ashbury

---

这可能会有所帮助 ~ https://dev59.com/01sX5IYBdhLWcg3wNdDj - Phil

这也是关于编程的内容~ https://github.com/AngularClass/angular2-webpack-starter/issues/696 - Phil

可能是使用Browserify在ES6中使用Bootstrap和jQuery包时出错的重复问题。 - Roy J

(window.$ = $; window.jQuery = $;) 对我不起作用。Bootstrap的JavaScript需要jQuery。在Bootstrap的JavaScript之前必须包含jQuery。 - Ashbury

"window.jQuery = window.$ = $; does not work"。这是因为在您的代码中没有设置 $。window.jQuery = window.$ = require('jquery') 可能会更好地工作。 - ceejayoz

Answer 1

我遇到了同样的问题，最终采用了以下解决方案，但是我没有使用Bootstrap alpha版，因为beta版已经发布了。

---

1. 安装Bootstrap及其依赖项jQuery和Popper.js：

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

2. 编辑你的/build/webpack.dev.conf.js文件，添加jQuery和Popper.js插件以处理依赖关系（可以在Bootstrap文档中了解更多相关信息）：

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. 编辑App.vue文件的<style>部分，将Bootstrap引入到您的应用程序的根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>

5. 使用命令行启动Vue应用

npm start

---

我不得不在 #app 选择器之后添加 @import 规则，否则作用域样式将被 Bootstrap 导入所覆盖。我认为有更好的方法来解决这个问题，一旦找到我会更新我的答案。

- Culpepper

---

看起来你可以在 main.js 文件中，导入 bootstrap 之后，添加以下代码而不是将其导入到 CSS 中：`import '../node_modules/bootstrap/dist/css/bootstrap.css';` - willcwf

我认为这些应该作为常规依赖项安装，而不是-dev依赖项。 - Brian McCall

Answer 2

你不需要在webpack.config.js中进行任何调整，比如在插件数组中添加 jQuery 全局变量。 一旦安装了所有的bootstrap依赖项，如jQuery和popper，只需在app.vue或main.js中import它们（如果您愿意，可以在每个组件中单独导入）。

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

就是这样了..

- ARUN Madathil

---

这应该成为被选中的答案。 - Zack

这就是了。那个Webpack堆栈是被接受的答案吗？ - Čamo

Answer 3

我会尽可能准确地翻译。

1. 进入Vue Cli项目，运行：

npm i bootstrap jquery popper.js

2. 前往src/main.js导入如下内容：

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

- goose

Answer 4

仅适用于Bootstrap 5

在cmd中按照以下步骤操作

1. vue create project-name

2. Select Vue version

3. cd project-name

4. npm i bootstrap @popperjs/core (just bootstrap means latest available bootstrap version)

                 (or)
   

   i)npm i bootstrap (to install bootstrap)

   ii)npm install --save @popperjs/core (to install popper.js)

   Note: Try this if only point 4 emits error

5. Add the below to src/main.js import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css';

6. Done now bootstrap will work on Vue-Cli

- Aswin Blix

Answer 5

使用Vue CLI v3.x/v4.x，您还可以使用@techiediaries/vue-cli-plugin-bootstrap快速将最新的Bootstrap 4版本添加到您的Vue项目中，而无需手动添加任何文件或设置。

前往新的命令行界面，导航到您的项目文件夹并运行以下命令：

$ vue add @techiediaries/bootstrap

该插件将负责添加任何配置选项并将依赖项安装到您的项目中，这样您就可以立即开始使用Bootstrap类，而不需要花费时间来确定需要添加哪些设置或依赖项。

- Ahmed

Answer 6

对于Gridsome的用户来说，解决方案完全相同！

yarn add jquery bootstrap popper.js

import 'jquery/src/jquery.js';
import 'popper.js/dist/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';

您也可以像这样导入CSS：import 'bootstrap/dist/css/bootstrap.min.css'，但是Bootstrap提供了一个SCSS文件，可以进行高度自定义。如果您需要这种自定义，请在main.js文件中导入一个新的scss文件。

// Load core styling
import '~/assets/styles/core.scss';

然后像这样导入bootstrap

@import '~bootstrap/scss/bootstrap';
@import 'theme.scss';

主题.scss遵循此文档 https://getbootstrap.com/docs/4.0/getting-started/theming/。

- Dimitrios Filippou

Answer 7

兄弟，你好！ 在你的Vue项目中安装和配置Bootstrap的简单方法是：

1. 首先，在IDE终端中使用以下命令安装bootstrap：

   npm i bootstrap

2. 您需要在main.js文件中进行配置，以便将其应用于整个项目。您需要从node_modules文件夹中导入此文件以在项目中使用它。

   import "../node_modules/bootstrap/dist/css/bootstrap.css";

   import "../node_modules/bootstrap/dist/js/bootstrap.bundle";

只需将这些行粘贴到您的main.js文件中，因为这是您所需的Bootstrap文件的路径，如果不是，请检查路径并编辑此路径。

如果您想测试它是否起作用，请转到app组件并创建一个按钮，为其提供Bootstrap类，并运行项目以查看它是否起作用。

谢谢，保重 :)

截图：

- GMD

Answer 8

像往常一样，在JS生态系统中，答案很快就会过时..这是我目前正在使用的：

$ yarn add jquery bootstrap @popperjs/core
├─ @popperjs/core@2.11.5
├─ bootstrap@5.2.0
└─ jquery@3.6.0

// main.js
import '@popperjs/core/dist/umd/popper';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'

- fguillen

Answer 9

根据您已安装的软件包（例如Vuetify），您可能无法使用boostrap 4 + vue 3。在按照线程中的说明之前，请确认您的版本！

- Melanie Ryan

Answer 10

jQuery在当前版本中不是必需的（当前版本："bootstrap": "^4.4.1"，"bootstrap-vue": "^2.5.0"）

• 安装Bootstrap
  • npm install bootstrap-vue bootstrap --save
• 然后，在应用程序入口点（main.js）中注册BootstrapVue
  • import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
  • Vue.use(BootstrapVue)
• 并在 main.js 文件中导入 Bootstrap 和 BootstrapVue css 文件：
  • import 'bootstrap/dist/css/bootstrap.css'
  • import 'bootstrap-vue/dist/bootstrap-vue.css'

- user7331530

---

jQuery在bootstrap 4中是必需的。然而，当前的bootstrap版本5.0.0.beta3和未来的版本将不需要jQuery。你的第一句话给人们留下了一个错误的印象，认为jQuery不是bootstrap 4的依赖项。 - Mishel Tanvir Habib