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

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

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

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 Directives的支持，这为我们提供了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 ，将在浏览器中编译并启动该应用程序。

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

├── 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

在这里， 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)
})

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

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

在文档部分中使用script标签导入Bootstrap-Vue

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

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

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

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

使用Bootstrap-Vue组件

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

https://unpkg.com/[email protected]/dist/css/bootstrap.min.css
https://unpkg.com/[email protected]/dist/bootstrap-vue.css

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

https://unpkg.com/[email protected]/dist/vue.min.js
https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js

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

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

构建Bootstrap-Vue警报组件

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

   Hello {{ name }}! 

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

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

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

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

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

 Hello {{ name }}! 

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

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

构建动态Bootstrap-Vue Listview组件

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

Bootstrap-Vue提供了两个组件来共同帮助我们构建列表： 和 。 我们可以将前者视为

或
标记的HTML等效项，而后者则呈现
1. 元素。

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

   
     
       iPhone
       OnePlus 3T
       Samsung Galaxy 8
     
   
   

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

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

   这是我们的简单列表：

   

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

   
     {{ item.message }}
   
   

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

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

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

   

   玩现场演示：

   请参阅CodePen上带有 SitePoint（ @SitePoint ）的Bootstrap Vue的Pen ListView 。

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

   聆听Bootstrap徽章上的事件

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

   使用Bootstrap-Vue，我们可以将组件用作元素的子代，以指示各种iPhone类型的数量，如下所示：

   iPhone 5
   

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

   

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

   
     
       Share on Twitter {{ share_count }}
     
   
   

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

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

   这应该给我们以下输出：

   

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

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

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

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

   结论

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

   现在就到您了：构建下一个很棒的Bootstrap-Vue网页并与世界分享！

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

   原文链接: https://www.sitepoint.com/bootstrap-vue-js-bootstrap-vue/