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

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

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

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

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

引导程序简介

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

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

将Bootstrap与Vue.js连接

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

• Bootstrap-Vue
• VueStrap

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

Bootstrap-Vue

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

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

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

使用命令行启动Bootstrap-Vue

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

npm i bootstrap-vue

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

• webpack简单 ：适用于小型应用程序的快速支架。
• webpack ：适用于具有较大生产能力的项目。

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

npm i -g vue-cli

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

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

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

然后，键入：

cd getting-started
npm install
npm run dev

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

• 第一行以vue init开头，创建一个名为getting-started的新目录，在其中初始化新的Bootstrap-Vue项目。
• 从cd getting-started ，我们访问新项目的目录。
• npm install负责安装所有项目的依赖项。
• 最后，使用npm run dev ，将在浏览器中编译并启动该应用程序。

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