将引导程序添加到 Vue CLI 项目

Question

一般来说，我是 Vue 和 webpack 的新手，我很难弄清楚如何导入东西。

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

在main.js我尝试导入引导程序和 jquery：

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

但我得到：

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

window.jQuery = window.$ = $; 不工作

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

Answer 1

我遇到了同样的问题，这就是我最终得到的结果，自从测试版发布以来，我没有使用 Bootstrap alpha。

---

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>部分以将 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>

5. 从 CLI 运行您的 Vue 应用程序

npm start

---

我必须在 #app 选择器之后添加 @import 规则，否则 Bootstrap 导入会取消范围样式。 我认为有更好的方法可以做到这一点，所以一旦我弄清楚了，我会更新我的答案。

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'

就是这样 ..

Answer 3

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

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

$ vue add @techiediaries/bootstrap

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

Answer 4

我会尽量准确

1.Go Vue Cli 项目运行：

npm i bootstrap jquery popper.js

2.转到src/main.js导入，如：

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

Answer 5

仅适用于 Bootstrap 5

按照下面的cmd

1. vue 创建项目名称

2. 选择Vue版本

3. cd 项目名称

4. npm i bootstrap @popperjs/core （只是引导意味着最新的可用引导版本）

    (or)

   i)npm i bootstrap（安装引导程序）

   ii)npm install --save @popperjs/core（安装popper.js）

   注意：如果只有第 4 点发出错误，请尝试此操作

5. 将以下内容添加到 src/main.js import 'bootstrap'; 导入 'bootstrap/dist/css/bootstrap.min.css';

6. 现在完成 bootstrap 将在 Vue-Cli 上工作

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';

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

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

然后像这样导入引导程序

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

theme.scss 遵循本文档https://getbootstrap.com/docs/4.0/getting-started/theming/

Answer 7

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

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'

Answer 9

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

1. 首先使用 IDE 终端中的命令安装引导程序，如下所示：

   npm i 引导

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

   导入“../node_modules/bootstrap/dist/css/bootstrap.css”；

   导入“../node_modules/bootstrap/dist/js/bootstrap.bundle”；

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

如果您想测试它是否工作，go 到应用程序组件并创建一个按钮，为其提供引导程序 class并运行项目以查看它是否工作。

谢谢，保重：）

单击此链接以查看它对我有用

Answer 10

使用Bootstrap CDN 并将其包含在 index.html 中

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

我从来没有在 Vue.js 中使用过 Bootsrap，因为我不是它的粉丝。 但是当我使用 Bulma 的 sass 时，我首先为 Bulma 做了npm install 。 然后我在src/assets/sass创建了一个文件夹，并在其中创建了一个main.scss并在其中通过@import '~bulma/bulma';导入了 bulma @import '~bulma/bulma';

Answer 11

当前版本不需要 jQuery（现在：“bootstrap”：“^4.4.1”，“bootstrap-vue”：“^2.5.0”）

• 安装引导程序
  • 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'