In this article, we’ll explore how to integrate Bootstrap with Vue.js using Bootstrap-Vue.

在本文中，我们将探讨如何使用Bootstrap-Vue将Bootstrap与Vue.js集成。

React and Vue.js are two leading, modern JavaScript frameworks for front-end development. While React has a steep learning curve, and a complex build process (if you’re coming from the jQuery world), all you need to do to start using Vue.js is a simple import script:

React和Vue.js是用于前端开发的两个领先的现代JavaScript框架。 尽管React具有陡峭的学习曲线和复杂的构建过程(如果您来自jQuery世界)，但是开始使用Vue.js所需要做的只是一个简单的导入脚本： 

<script src="https://unpkg/vue@2.5.17/dist/vue.min.js"></script>

Bootstrap has become a popular HTML/CSS framework for building mobile responsive websites. However, it relies mostly on jQuery for its core features as well as its extensive list of components — such as alerts, and modals. So we’ll explore how to use Bootstrap with Vue.js, thereby removing the need for jQuery.

Bootstrap已成为构建移动响应网站的流行HTML / CSS框架。 但是，它主要依赖jQuery的核心功能以及广泛的组件列表(例如警报和模式)。 因此，我们将探讨如何在Vue.js中使用Bootstrap，从而消除对jQuery的需求。

引导程序简介 (Introducing Bootstrap)

Originally created in late 2011 by Mark Otto and Jacob Thornton at Twitter Inc., Bootstrap soon found popularity outside Twitter after being open-sourced. It continued to grow as the fastest front-end framework for web developers worldwide.

Bootstrap最初由Twitter Inc.的Mark Otto和Jacob Thornton于2011年底创建，但在开源之后不久便在Twitter之外受到欢迎。 它继续发展成为全球Web开发人员最快的前端框架。

Today, Bootstrap has become the de-facto standard for starting a new website project, with its CSS and JS architecture providing mobile responsive and common UI components, along with support for most modern browsers.

如今，Bootstrap已成为启动新网站项目的实际标准，其CSS和JS体系结构提供了移动响应和通用UI组件，并支持大多数现代浏览器。

将Bootstrap与Vue.js连接 (Connecting Bootstrap with Vue.js)

As we mentioned earlier, using with Bootstrap with Vue.js is slightly tricky, because of Bootstrap’s dynamic components’ heavy dependency on jQuery. However, there are at least a couple of good projects that are in the process of bridging that gap:

如前所述，将Bootstrap与Vue.js结合使用会有些棘手，因为Bootstrap的动态组件严重依赖jQuery。 但是，至少有一些好的项目正在弥合这一差距：

  • Bootstrap-Vue

    Bootstrap-Vue

  • VueStrap

    VueStrap

We’ll explore the first option here, Bootstrap-Vue, since it’s the most updated and popular project.

我们将在这里探讨第一个选项Bootstrap-Vue，因为它是最新，最受欢迎的项目。

Bootstrap-Vue (Bootstrap-Vue)

Bootstrap-Vue not only supports the Bootstrap components and grid system, but also includes support for Vue.js Directives, which gives us the full feature set from the Vue.js ecosystem.

Bootstrap-Vue不仅支持Bootstrap组件和网格系统，还包括对Vue.js指令的支持，这为我们提供了Vue.js生态系统的全部功能集。

One of the cool features of Bootstrap-Vue is that it has an online Playground. This playground is hot-reloaded and also lets us export our code to JSFiddle. Isn’t that cool!

Bootstrap-Vue的一项很酷的功能是它具有一个在线Playground 。 这个游乐场是热装的，还可以让我们将代码导出到JSFiddle。 那不是很酷！

I believe a good documentation and developer ecosystem is necessary for the success of any software project, and Bootstrap-Vue ticks all the checkboxes.

我认为，一个良好的文档和开发人员生态系统对于任何软件项目的成功都是必不可少的，Bootstrap-Vue选中所有复选框。

使用命令行启动Bootstrap-Vue (Getting Started with Bootstrap-Vue Using the Command Line)

If you’ve been following modern web development trends, you’d definitely know about npm and installing libraries with it. Bootstrap-Vue can be installed with npm through the following command:

如果您一直遵循现代Web开发趋势，那么您肯定会了解npm并随其安装库。 可以通过以下命令将Bootstrap-Vue与npm一起安装： 

npm i bootstrap-vue

Bootstrap-Vue also provides two vue-cli templates that can scaffold our projects without too much hassle:

Bootstrap-Vue还提供了两个vue-cli模板，它们可以为我们的项目提供便利，而不会造成太多麻烦：

  • webpack simple: quick scaffold for a small application.

    webpack简单 ：适用于小型应用程序的快速支架。

  • webpack: for larger production capable projects.

    webpack ：适用于具有较大生产能力的项目。

First, we install the vue-cli by:

首先，我们通过以下方式安装vue-cli： 

npm i -g vue-cli

Then, we initialize our project — let’s call it getting-started — using the webpack-simple template by typing the following in the terminal:

然后，通过在终端中键入以下内容，使用webpack-simple模板来初始化我们的项目(我们称之为入门) ： 

vue init bootstrap-vue/webpack-simple getting-started

A wizard will open. You can press Return to accept the defaults.

将打开一个向导。 您可以按Return键接受默认设置。

Then, type:

然后，键入： 

cd getting-started
npm install
npm run dev

Let’s look at this code line by line:

让我们逐行看一下这段代码：

  • The first line starts with vue init creates a new directory called getting-started, where a new Bootstrap-Vue project is initialized.

    第一行以vue init开头，创建了一个名为getting-started的新目录，在其中初始化了一个新的Bootstrap-Vue项目。

  • With cd getting-started, we access the new project’s directory.

    从cd getting-started ，我们访问新项目的目录。

  • npm install takes care of installing all the project’s dependencies.

    npm install负责安装所有项目的依赖项。

  • Finally, with npm run dev, the app is compiled and launched in the browser.

    最后，使用npm run dev ，将在浏览器中编译并启动该应用程序。

Your local environment should now contain the following files and folders:

现在，您的本地环境应包含以下文件和文件夹： 

├── index.html
├── node_modules
│   └── lots of files
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

Here, App.vue and main.js are the primary files of interest. If we fire up our text editor and open main.js, we’ll see the following code, which imports the Bootstrap style sheet and Bootstrap-Vue:

在这里， App.vue和main.js是主要的文件。 如果启动文本编辑器并打开main.js ，我们将看到以下代码，该代码导入Bootstrap样式表和Bootstrap-Vue： 

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

new Vue({
  el: '#app',
  render: h => h(App)
})

At the same time, the App.vue document loads up the front-end code.

同时， App.vue文档将加载前端代码。

After running the npm run dev command, the project’s index.html page should render a page like the one below:

运行npm run dev命令后，项目的index.html页面应呈现如下页面：

使用文档<head>部分中的script标签导入Bootstrap-Vue (Importing Bootstrap-Vue with a script Tag in the Document <head> Section)

While we saw the npm way of installing and working with Bootstrap-Vue, let’s also look at the simpler option: including Bootstrap-Vue using a script tag in our HTML document:

在我们看到了npm安装和使用Bootstrap-Vue的方法时，我们还来看一个更简单的选项：在HTML文档中使用script标记包括Bootstrap-Vue： 

<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
<link type="text/css" rel="stylesheet" href="https://unpkg/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>

<!-- Add Vue and Bootstrap-Vue JS just before the closing </body> tag -->
<script src="https://unpkg/vue/dist/vue.min.js"></script>
<script src="https://unpkg/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

This will pull in the minified, latest version of each library. At the time of writing, this is Bootstrap v4.1.3, Bootstrap-Vue v2.0.0-rc.11, and Vue v2.5.17.

这将提取每个库的最新最小版本。 在撰写本文时，这是Bootstrap v4.1.3，Bootstrap-Vue v2.0.0-rc.11和Vue v2.5.17。

If for some reason you need to support legacy browsers, you can also include the @babel/polyfill, which will emulate a full ES2015+ environment:

如果出于某种原因需要支持旧版浏览器，则还可以包含@ babel / polyfill，它将模拟完整的ES2015 +环境： 

<script src="https://unpkg/babel-polyfill@latest/dist/polyfill.min.js"></script>

Now we can work with Vue.js, Bootstrap, and Bootstrap-Vue on our local machine.

现在，我们可以在本地计算机上使用Vue.js，Bootstrap和Bootstrap-Vue。

使用Bootstrap-Vue组件 (Working With Bootstrap-Vue Components)

For the demos in this article, we’ll use CodePen. To set it up, let’s create our Pen, click on the settings icon, and import the following CSS in the CSS tab:

对于本文的演示，我们将使用CodePen 。 要进行设置，让我们创建笔，单击设置图标，然后在CSS选项卡中导入以下CSS： 

https://unpkg/bootstrap@4.1.3/dist/css/bootstrap.min.css
https://unpkg/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css

In the JavaScript tab, let’s import the Vue and Bootstrap Vue libraries:

在JavaScript选项卡中，让我们导入Vue和Bootstrap Vue库： 

https://unpkg/vue@2.5.17/dist/vue.min.js
https://unpkg/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js

Also, make sure to select Babel as the JavaScript preprocessor.

另外，请确保选择Babel作为JavaScript预处理器。

Finally, let’s click the Save & Close button. Now we’re ready to start playing with Bootstrap-Vue components.

最后，让我们单击“ 保存并关闭”按钮。 现在，我们准备开始使用Bootstrap-Vue组件。

构建Bootstrap-Vue警报组件 (Building a Bootstrap-Vue Alert Component)

To create a Bootstrap-Vue alert component, we’re going to add the following to our CodePen HTML area:

为了创建Bootstrap-Vue警报组件，我们将在CodePen HTML区域中添加以下内容： 

<div id='app'>
  <b-alert show> Hello {{ name }}! </b-alert>
</div>

Next, we add the Vue instance to the JS area:

接下来，我们将Vue实例添加到JS区域： 

new Vue({
  el: "#app",
  data: {
    name: "Sitepoint"
  }
});

As a result, we should see the “Hello Sitepoint!” alert in the output view area:

结果，我们应该看到“ Hello Sitepoint！” 在输出视图区域中发出警报：

See the Pen Getting Started with Bootstrap Vue by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint ) 编写的Pens Bootstrap Vue入门 。

The above code displays a simple Bootstrap alert component using Vue.js and Bootstrap-Vue. Next, we’re going to change some of the parameters for this alert box to make it more interesting. For example, to make the alert box dismissible, let’s add the keyword dismissible next to the show directive:

上面的代码使用Vue.js和Bootstrap-Vue显示了一个简单的Bootstrap警报组件。 接下来，我们将更改此警报框的一些参数，使其更加有趣。 例如，要使警报框可忽略，让我们在show指令旁边添加关键字dismissible ： 

<b-alert show dismissible> Hello {{ name }}! </b-alert>

Now the alert displays a dismiss icon button, which, when clicked, removes the alert from the page. Try it out for yourself!

现在，警报显示一个关闭图标按钮，单击该按钮可将警报从页面中删除。 自己试试吧！

Refer to the official documentation for Bootstrap-Vue alerts for more configurable props.

有关更多可配置的道具，请参考Bootstrap-Vue警报的官方文档 。

构建动态Bootstrap-Vue Listview组件 (Building a Dynamic Bootstrap-Vue Listview Component)

So now that we have got a good idea of how to use Bootstrap-Vue, let’s build a list component. This is perhaps the most common piece of UI you’ll find in web and mobile apps.

现在，我们对如何使用Bootstrap-Vue有了一个很好的了解，让我们构建一个列表组件。 这也许是您在Web和移动应用程序中最常见的UI。

Bootstrap-Vue provides two components that together help us to build a list: <b-list-group> and <b-list-group-item>. We can think of the former as the HTML equivalent of a <ul> or <ol> tag, while the latter renders a <li> element.

Bootstrap-Vue提供了两个组件来共同帮助我们构建列表： <b-list-group>和<b-list-group-item> 。 我们可以将前者视为<ul>或<ol>标记HTML等效项，而后者则呈现<li>元素。

We start by building a static list of some smartphones:

我们首先构建一些智能手机的静态列表： 

<div id='app'>
  <b-list-group>
    <b-list-group-item href="http://apple">iPhone</b-list-group-item>
    <b-list-group-item>OnePlus 3T</b-list-group-item>
    <b-list-group-item>Samsung Galaxy 8</b-list-group-item>
  </b-list-group>
</div>

Now, we add our Vue instance in the JavaScript panel:

现在，我们在JavaScript面板中添加Vue实例： 

new Vue({
  el: '#app'
});

And here’s our simple list:

这是我们的简单列表：

However, this is nowhere close to being a dynamic list. Let’s add the Vue.js v-for directive inside the list component’s markup to render a few list items from an array:

但是，这远远不是一个动态列表。 让我们在列表组件的标记内添加Vue.js v-for指令 ，以呈现数组中的一些列表项： 

<b-list-group-item v-for="item in items">
  {{ item.message }}
</b-list-group-item>

Next, let’s add the items array to the Vue instance:

接下来，让我们将items数组添加到Vue实例： 

new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Nokia 8' },
      { message: 'OnePlus 5T' },
      { message: 'Samsung Galaxy S9' }
    ]
  }
});

And here’s our smartphone data displayed in the Bootstrap-Vue list component:

这是在Bootstrap-Vue列表组件中显示的我们的智能手机数据：

Have a play with the live demo:

玩现场演示：

See the Pen ListView with Bootstrap Vue by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上带有 SitePoint( @SitePoint )的Bootstrap Vue的Pen ListView 。

As a challenge for you, try making this list even more dynamic by adding an Ajax call to pull in content from an API or from an RSS feed.

作为对您的挑战，请尝试通过添加Ajax调用使该列表更加动态，以从API或RSS feed提取内容。

聆听Bootstrap徽章上的事件 (Listening to Events on Bootstrap Badges)

Bootstrap has a badge component which is useful for keeping count of items or labeling them. For example, in the list example above, we could add a badge to the iPhone list item indicating the number of variants (five versions of iPhone).

Bootstrap具有徽章组件，可用于记录项目或标记项目。 例如，在上面的列表示例中，我们可以向iPhone列表项添加标志，以指示变体的数量(iPhone的五个版本)。

With Bootstrap-Vue, we can use the <b-badge> component as a child of the <b-list-group-item> element to indicate the number of the various iPhone types as follows:

通过Bootstrap-Vue，我们可以将<b-badge>组件用作<b-list-group-item>元素的子代，以指示各种iPhone类型的数量，如下所示： 

<b-list-group-item href="http://apple">iPhone <b-badge>5</b-badge></b-list-group-item>

This should render the list looking like this:

这应该使列表看起来像这样：

Now, let’s add a share this button on our page to keep track of the page’s number of shares. To accomplish this, we can use the <b-button> component to create a Bootstrap button and within the button we’ll nest the <b-badge> child element:

现在，让我们在页面上添加一个共享此按钮，以跟踪页面的共享数量。 为此，我们可以使用<b-button>组件创建一个Bootstrap按钮，并在该按钮内嵌套<b-badge>子元素： 

<div class="text-center">
  <b-button variant="primary" size="sm">
    Share on Twitter <b-badge variant="light">{{ share_count }}</b-badge>
  </b-button>
</div>

We modify our JavaScript code by adding a share_count variable, which will keep track of the number of times our page is shared:

我们通过添加share_count变量来修改JavaScript代码，该变量将跟踪页面共享的次数： 

new Vue({
  el: '#app',
  data: {
    share_count:0
  }
});

This should give us the following output:

这应该给我们以下输出：

Note, the button is still not dynamic. That is, it won’t increment the share counter when we click on the Share on Twitter button, as we haven’t added an event listener to the button yet. We’ll use the Vue.js v-on directive to listen to the button click event:

注意，该按钮仍然不是动态的。 也就是说，当我们单击“ 在Twitter上共享”按钮时，它不会增加共享计数器，因为我们尚未向该按钮添加事件侦听器。 我们将使用Vue.js v-on指令来监听按钮click事件： 

<b-button variant="primary" size="sm" v-on:click="share_count += 1">

This makes the share_count variable increment whenever we click on the button. The code for the badge need not change, since it’s already bound to the share_count variable. Therefore, whenever the button is clicked, the share_count variable is incremented and so is the badge.

每当我们单击按钮时，这都会使share_count变量递增。 徽章的代码无需更改，因为它已经绑定到share_count变量。 因此，每当单击按钮时， share_count变量都会增加，徽章也会增加。

That’s the beauty of Vue.js data binding!

这就是Vue.js数据绑定的美！

See the Pen Listening to Events on Badges. by SitePoint (@SitePoint) on CodePen.

参见笔听徽章上的事件。 通过SitePoint( @SitePoint上) CodePen 。

结论 (Conclusion)

In this tutorial, we’ve seen how to use Bootstrap-Vue to add Bootstrap-like components to Vue.js applications.

在本教程中，我们已经看到了如何使用Bootstrap-Vue向Vue.js应用程序添加类似Bootstrap的组件。

Now it’s over to you: build the next awesome Bootstrap-Vue web page and share it with the world!

现在已经结束：构建下一个很棒的Bootstrap-Vue网页并与世界分享！

If you’ve got the basics of Bootstrap under your belt but are wondering how to take your Bootstrap skills to the next level, check out our Building Your First Website with Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.

如果您掌握了Bootstrap的基础知识，但又想知道如何将Bootstrap技能提高到一个新的水平，请查看我们的使用Bootstrap 4建立您的第一个网站课程，以快速，有趣地介绍Bootstrap的功能。

翻译自: https://www.sitepoint/bootstrap-vue-js-bootstrap-vue/

更多推荐

使用Bootstrap-Vue将Bootstrap与Vue.js集成