BootstrapVue 入门

卜鹏

2023-12-01

编者注：本文于 2022 年 9 月 2 日更新，包含有关 BootstrapVue 的优势、BootstrapVue 和 Bootstrap 之间的差异的信息，并对代码进行一般更新。

Vue.js 是一个流行的 JavaScript 库，用于在短时间内开发原型。这包括用户界面、前端应用程序、静态网页和本机移动应用程序。它以其易于使用的语法和简单的数据绑定功能而闻名。

最近，Vue.js 生态系统中发布了一个新包。它是流行的 Bootstrap 框架和 Vue.js 的集成。这个包被称为 BootstrapVue 。它允许我们使用与 Bootstrap (v4) 动态集成的自定义组件。

更重要的是？它支持自定义 Bootstrap 组件、网格系统，还支持 Vue.js 指令。

在这篇文章中，我们将介绍 BootstrapVue 的基础知识，解释一般概念，演示设置过程，并在此过程中构建一个迷你 Vue.js 项目，为您提供更多实践经验。

为什么使用 BootstrapVue？
BootstrapVue 和 Bootstrap 一样吗？
使用 BootstrapVue 的好处
入门
- 先决条件
创建一个 Vue 项目
如何在项目中添加 Bootstrap 和 BootstrapVue
- 使用 npm 或纱线
- 使用 CDN
设置 BootstrapVue
创建引导组件
处理迁移

为什么使用 BootstrapVue？

鉴于 Bootstrap 是可用的最流行的CSS 框架（在我看来），大多数已经迁移或打算从 Vanilla JavaScript 等框架迁移到 Vue.js 的开发人员总是发现迁移有点困难，因为 Bootstrap 对 jQuery 的严重依赖 .

使用 BootstrapVue，任何开发人员都可以从 Vanilla.js 或 jQuery 切换到 Vue.js，而无需担心 Bootstrap 对 jQuery 的严重依赖，甚至找不到解决方法。这就是 BootstrapVue 来救援的方式。它有助于弥合这一差距，并允许新加入的 Vue 开发人员在他们的项目中轻松使用 Bootstrap。

BootstrapVue 和 Bootstrap 一样吗？

Bootstrap 和 BootstrapVue 都是用于组成网站前端的开源工具。虽然它们听起来很相似，但它们并不是一回事。

首先，BootstrapVue 是一个围绕 Vue.js 构建的包装库，因此开发人员可以轻松地将 BootstrapVue 集成到他们的应用程序中。

其次，BootstrapVue 是一个组件库，而 Bootstrap 是一个 CSS 框架。这意味着 BootstrapVue 带有 UI 组件，例如 b-alert和 b-button，而 BootStrap 带有实用程序类，如 alert和 btn.

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

使用 BootstrapVue 的好处

BootstrapVue 有很多好处，包括：

它提供了预构建的 Bootstrap 组件，在创建用户界面时具有很大的灵活性
作为一个组件库，BootstrapVue 可以更轻松地维护项目和修复错误，因为它不会用多个类淹没标记
BootstrapVue 为处理表单提供了预构建的验证
我们可以轻松地传入自定义和预构建的 props 来修改 BootstrapVue 组件的行为。这增强了开发人员的体验，并使 BootstrapVue 成为一个很好的库
BootstrapVue 带有免费和付费主题，我们可以利用它们来快速构建前端。
它有一个的在线交互式游乐场用于测试组件

入门

当使用 webpack、babel 等模块打包器时，最好将包直接包含到您的项目中。出于演示目的并为您提供理解和使用 BootstrapVue 的实践方法，我们将使用 BootstrapVue 设置一个 Vue.js 项目，并将其构建为一个功能性 Vue.js 应用程序，该应用程序从外部 API 获取食物。

先决条件

Vue.js 的基础知识将有助于理解这个演示
在您的笔记本电脑上全局安装 Vue CLI 工具以跟进这篇文章。如果您当前没有安装它，请按照此安装指南

创建一个 Vue 项目

首先，我们必须创建一个 Vue.js 项目，我们可以使用它来演示 BootstrapVue 组件的实现。首先，打开一个终端窗口并运行以下命令：

npm init vue@latest

上面的命令会抛出一个预设的选择对话框，如下所示：

接下来，导航到 vue-project目录并使用以下命令启动开发服务器：

cd vue-project
npm install
npm run dev

这将为 localhost:8080 上的应用程序提供服务。导航到该 URL 后，我们会看到实时应用程序：

如何在项目中添加 Bootstrap 和 BootstrapVue

有两种主要方法可以做到这一点，使用 npm 和 yarn 等包管理器，或者使用 CDN 链接。

使用 npm 或纱线

我们将使用 npm 或 yarn 为项目安装我们之前提到的所有必要的包。为此，请导航到项目的根目录并运行以下任一命令，具体取决于您首选的包管理器：

来自 LogRocket 的更多精彩文章：

不要错过 The Replay 来自 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 优化应用程序的性能
之间切换在多个 Node 版本
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri ，一个用于构建二进制文件的新框架
比较 NestJS 与 Express.js

# With npm
npm install bootstrap-vue bootstrap axios
OR
# With yarn
yarn add bootstrap-vue bootstrap axios

上面的命令将安装 BootstrapVue 和 Bootstrap 包。 BoostrapVue 包包含所有 BootstrapVue 组件，常规 Bootstrap 包含 CSS 文件。我们还安装了 Axios 来帮助从 themealdb API 为我们的应用获取餐食。

使用 CDN

我们已经看到了将 BootstrapVue 安装到我们的 Vue 项目中的包管理器方式，现在让我们看一下可能需要更少努力的不同方法。要通过 CDN 将 Bootstrap 和 BootstrapVue 添加到您的 Vue 项目，请打开 index.html项目公共文件夹中的文件，并将此代码添加到适当的位置：

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

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

这会将每个库的最小化和最新版本引入我们的项目，既简单又方便！但是，出于本项目的目的，我们将坚持使用包管理器的第一个选项。所以，让我们继续设置 BootstrapVue 包。

期刊杂志App，免费看期刊报纸的软件，全国各地报刊、杂志都有！

设置 BootstrapVue

接下来，让我们设置我们刚刚安装的 BootstrapVue 包。前往您的 main.js文件并将这行代码添加到顶部：

//src/main.js
import Vue, { createApp } from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "./assets/main.css";

// Import Bootstrap and BootstrapVue CSS files (order is important)
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);

// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);
createApp(App).mount("#app");

在这里，我们导入了 BoostrapVue和 IconsPlugin包，然后使用 Vue.use()函数，以便我们的 Vue 应用程序可以识别它。我们还将 Bootstrap 和 BootstrapVue CSS 文件导入到项目中。

创建引导组件

我们现在处于可以开始探索 BoostrapVue 组件的阶段。让我们从创建我们的第一个组件开始。我们将创建的第一个组件将是导航栏组件。转到您的组件目录，创建一个名称为的文件 Navbar.vue并使用以下代码更新它：

//src/components/Navbar.vue
<template>
    <div>
      <b-navbar toggleable="lg" type="dark" variant="success">
        <b-container>
            <b-navbar-brand href="#">Mealzers</b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
              <!-- Right aligned nav items -->
              <b-navbar-nav class="ml-auto">
                <b-nav-form>
                  <b-form-input 
                    size="sm" 
                    class="mr-sm-2" 
                    placeholder="Search for a meal"
                    v-model="meal"
                    ></b-form-input>
                  <b-button 
                    size="sm" 
                    class="my-2 my-sm-0" 
                    type="submit" 
                    @click.prevent="getMeal"
                    >Search</b-button>
                </b-nav-form>
                <b-nav-item-dropdown right>
                  <!-- Using 'button-content' slot -->
                  <template slot="button-content"><em>User</em></template>
                  <b-dropdown-item href="#">Profile</b-dropdown-item>
                  <b-dropdown-item href="#">Sign Out</b-dropdown-item>
                </b-nav-item-dropdown>
              </b-navbar-nav>
            </b-collapse>
          </b-container>
      </b-navbar>
    </div>  
</template>

<script>
  export default {
      data() {
          return {
              meal: ''
          }
      },
    methods: {
      getMeal() {
        ...
      }
    }
  }    
</script>

导航栏组件包含几个 BootstrapVue 组件，其中之一是 b-navbar. 该组件是导航栏中所有其他组件的母组件。如果没有此组件，导航栏中的所有其他组件将无法正确呈现。

导航栏上的文本颜色可以用 type道具。这 background-color导航栏的 variant道具。这些颜色可以是任何正常的 Bootstrap 默认颜色—— info, primary, success， ETC。

另一个组件是 b-navbar-brand. 这是可以呈现网站徽标的地方。它还包含在 variant和 type可以用来改变的道具 background-color和 text-color分别。其他 BootstrapVue 组件包括：

b-nav-form
b-nav-item-dropdown
b-dropdown-item
b-navbar-toggle
b-collapse
b-nav-item（可以使用“disabled”属性禁用）
b-navbar-nav
b-nav-item
还有更多

BootstrapVue 组件的一大优点是它们默认是响应式的。因此，我们不需要编写任何额外的代码或使用外部库来使它们具有响应性。

我想让我们看看的另一个组件是 Card零件。这 Card组件允许我们在卡片中显示图像、文本等。它写成 b-card. 为了演示它，让我们创建一个 Cards.vue我们的组件目录中的文件。然后用下面的代码更新它：

//src/components/Cards.vue
<template>
  <b-container>
    <div v-if="meals.length">
      <b-row>
        <div v-bind:key="data.index" v-for="data in meals">
            <b-card
              v-bind:title="data.strCategory"
              v-bind:img-src="data.strCategoryThumb"
              img-alt="Image"
              img-top
              tag="article"
              style="max-width: 20rem;"
              class="mb-2">
              <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
              <b-button href="#" variant="primary">View food</b-button>
            </b-card>
        </div>
      </b-row>
    </div>
    <div v-else>
      <h5>No meals available yet</h5>
    </div>
  </b-container>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      meals: []
    };
  },
  mounted() {
    axios
      .get("https://www.themealdb.com/api/json/v1/1/categories.php")
      .then(response => {
        this.meals = response.data.categories;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

渲染 Cards我们刚刚创建的组件，让我们修改 HelloWorld.vue文件。打开它并使用以下代码更新它：

//src/components/HelloWorld.vue
<template>
  <div>
    <Cards />
  </div>
</template>

<script>
  import Cards from './Cards.vue'
</script>

我们在这里所做的是创建一个 Cards组件并将其嵌套到 HelloWorld.vue文件。请注意，在 Cards组件，我们有一个生命周期钩子来修改我们的数据。结果，数据被填充到 b-card渲染到浏览器之前的组件。

接下来，让我们更新我们的 App.vue文件以捕获我们最近的更改并将正确的组件呈现给浏览器。打开它并用下面的代码片段更新它：

//App.vue
<template>
  <div id="app">
    <Navbar />
    <HelloWorld/>
  </div>
</template>
<script>
  import HelloWorld from './components/HelloWorld.vue';
  import Navbar from './components/Navbar.vue';  
</script>

此时，如果我们回到浏览器，我们将看到我们的餐店应用程序运行如下：

卡片布局不正确，我们必须纠正它。幸运的是，BootstrapVue 有一些内置组件，我们可以使用这些组件将卡片放入网格中。他们是：

b-row
b-col

让我们修改我们的代码 Cards.vue文件以使用我们上面提到的 BootstrapVue 组件在网格中呈现内容。打开 Cards.vue文件并使用以下代码段更新 HTML 标记：

//src/components/Cards.vue
<template>
  <b-container>
    <div v-if="meals.length">
      <b-row>
        <div v-bind:key="data.index" v-for="data in meals">
          <b-row>
            <b-col l="4">
              <b-card
                v-bind:title="data.strCategory"
                v-bind:img-src="data.strCategoryThumb"
                img-alt="Image"
                img-top
                tag="article"
                style="max-width: 20rem;"
                class="mb-2">
              <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
              <b-button href="#" variant="primary">View food</b-button>
              </b-card>
            </b-col>
          </b-row>
        </div>
      </b-row>
    </div>
    <div v-else>
      <h5>No meals available yet</h5>
    </div>
  </b-container>
</template>

在这里，我们将 b-col组件与 b-row创建网格布局。

现在，如果我们再次查看浏览器，我们应该会看到一张布局正确的卡片，其中包含网格中的渲染内容。

我们有一个整洁呈现的响应式膳食应用程序。我们只用少数 BootstrapVue 的组件构建了所有这些。要了解有关 BootstrapVue 以及您可以使用它做的所有事情的更多信息，请考虑查看官方文档。

处理迁移

如果您想将现有项目从常规 Bootstrap4 迁移到 BootstrapVue，该怎么办？会有多简单？这将是一件轻而易举的事。这是您需要做的所有事情：

去除 bootstrap.js来自构建脚本的文件
消除 jQuery从您的应用程序中，BootstrapVue 独立工作
将您的标记从本机 Bootstrap 转换为 BootstrapVue 自定义组件标记

就是这样！通过三个清晰的步骤，您可以将现有项目从依赖常规 jQuery 的 Bootstrap 迁移到更简单的独立 BootstrapVue 包，而不会破坏任何现有代码。

结论

在这篇文章中，我们通过示例演示了如何开始使用 BootstrapVue。我们从安装步骤到在 Vue 项目中设置它，最后使用它的自定义组件来构建我们的 Mealzers 应用程序的一部分。正如我们所见，BootstrapVue 模块简单易用。如果您具备常规 Bootstrap 包的工作知识，那么开始使用 BootstrapVue 将是轻而易举的事。

以用户的方式体验您的 Vue 应用程序

调试 Vue.js 应用程序可能很困难，尤其是在用户会话期间有数十个甚至数百个突变时。如果您对监控和跟踪生产中所有用户的 Vue 突变感兴趣，请尝试 LogRocket 。

LogRocket 就像一个用于 Web 和移动应用程序的 DVR，从字面上记录您的 Vue 应用程序中发生的所有事情，包括网络请求、JavaScript 错误、性能问题等等。无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。

LogRocket Vuex 插件将 Vuex 突变记录到 LogRocket 控制台，为您提供有关导致错误的原因以及发生问题时应用程序处于什么状态的上下文。