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

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.com/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.