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

Question

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

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

在 ma​​in.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。 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

1. 编辑您的 /build/webpack.dev.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",
        // ...
    })
    // ...
]

1. 编辑 /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 而不仅仅是 import 他们在 app.vue 或 main.js 中（如果您愿意，您可以在每个组件中单独导入）

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

就是这样..

Answer 3

我会尽量准确

1.转到 Vue Cli 项目 运行：

npm i bootstrap jquery popper.js

2.转到src/main.js 像这样导入：

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

Answer 4

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

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

$ vue add @techiediaries/bootstrap

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

Answer 5

仅适用于 Bootstrap 5

在cmd中按照下面的操作

1. vue 创建项目名称

2. 选择 Vue 版本

3. cd 项目名称

4. npm i bootstrap @popperjs/core（只是 bootstrap 表示最新可用的 bootstrap 版本）

                 (or)
   

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

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

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

5. 将以下内容添加到 src/main.js 导入“引导”； 导入'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';

你也可以像这样在这里导入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

使用Bootstrap CDN 并将其作为 a 包含在您的 index.html 中

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

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

Answer 9

当前版本不需要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'