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

Question

我是Vue和webpack的新手,我很难搞清楚如何导入东西.

我通过vue init添加bootstrap 4 创建了一个新的Vue项目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';

但我得到:

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

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

最后,我在哪里以及如何加载Sass以便整个应用程序可以使用它？

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一个插件来处理依赖关系(你可以阅读更多关于这里的引导文档):

   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

仅适用于 Bootstrap 5

在cmd中执行以下操作

1. vue 创建项目名称

2. 选择Vue版本

3. cd 项目名称

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

                 (or)
   

   i)npm i bootstrap （安装 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 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

您不想做任何调整，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'

而已 ..

Answer 6

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

yarn add jquery bootstrap popper.js

yarn add jquery bootstrap popper.js

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

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

然后像这样导入引导程序

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

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