快速上手BootstrapVue

38次阅读

共计 7636 个字符，预计需要花费 20 分钟才能阅读完成。

翻译：疯狂的技术宅
原文：https://blog.logrocket.com/ge…

本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章

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

最近，Vue.js 生态系统发布了一个新的软件包。它是流行的 Bootstrap 框架与 Vue.js 的集成。这个包称为 BootstrapVue。它允许我们使用与 Bootstrap（v4）集成的自定义组件。
它还支持自定义 Bootstrap 组件、网格系统，还支持 Vue.js 指令。

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

为什么选择 BootstrapVue？

鉴于 Bootstrap 是最受欢迎的独立 CSS 框架（在我看来），很多已经或有意向从 Vanilla JavaScript 的框架转移到 Vue.js 的开发人员总是发现迁移有点困难，因为 Bootstrap 对 jQuery 的依赖性很大。

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

入门

使用 webpack、babel 等模块捆绑包时，最好直接把这些包包含到项目中。为了给你演示并提供了解和使用 BootstrapVue 的实践方法，我们将用 BootstrapVue 设置一个 Vue.js 项目，并把它构建到一个功能性的 Vue.js 应用中。

先决条件

  • 具备 Vue.js 的基本知识可以帮你理解这个演示
  • 在你的电脑上全局安装 Vue CLI。如果你目前尚未安装，请按照此安装指南进行操作

Create a Vue project

创建一个 Vue 项目

首先必须创建一个 Vue.js 项目，我们将会用它来演示 BootstrapVue 组件的实现。在首选目录上打开一个终端窗口，然后运行以下命令：

vue create bootstrapvue-demo

如果你没有全局安装 Vue CLI，请按照此安装指南进行操作后再继续本教程。

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

选择 default，然后单击 Enter 继续：

现在，你创建了一个 Vue 程序，下面转到新的 Vue 项目目录，并使用以下命令启动开发服务器：

cd bootstrapvue-demo
npm run serve

你的 Vue 应用程序将会在 localhost:8080 上提供服务。在浏览器中打开它，你将看到自己的 Vue 应用程序：

将 Bootstrap 和 BootstrapVue 添加到项目中

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

使用 npm 或 yarn

我们将使用 npm 或 yarn 安装之前提到的包。切换到项目的根目录并运行下面的任一命令，具体取决于你首选的包管理器：

# With npm
npm install bootstrap-vue bootstrap axios

# With yarn
yarn add bootstrap-vue bootstrap axios

上面的命令将会安装 BootstrapVue 和 Bootstrap 包。 BoostrapVue 包中包含所有 BootstrapVue 组件，常规 Bootstrap 包含 CSS 文件。另外还安装了 Axios 来帮助我们从 themealdb API 获取程序所需的数据。

Using CDN

使用 CDN

要通过 CDN 将 Bootstrap 和 BootstrapVue 添加到 Vue 项目，请打开项目公共文件夹中的 index.html 文件，并将此代码添加到适当的位置：


<!-- public/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 包。

设置 BootstrapVue

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

//src/main.js
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

在这里做的事情非常简单，我们导入了 BoostrapVue 包，然后用 Vue.use() 函数在程序中注册它，以便 Vue 程序可以识别。

我们还需要将 Bootstrap CSS 文件导入到项目中。将这段代码段添加到 main.js 文件中：

//src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

在将必要的模块导入 Vue 程序后，你的 main.js 文件应该和下面的代码段类似：


//src/main.js
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

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

创建 Bootstrap 组件

下面开始创建我们的第一个组件，第一个组件是 Navbar 组件 。 转到组件目录，创建一个名为 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>

Navbar 组件中包含几个 BootstrapVue 组件，其中一个是 b-navbar 组件。它是 Navbar 中其他组件的父组件。如果没有这个组件，Navbar 中的所有其他组件将无法正确呈现。

可以用 type 属性更改 Navbar 上的文本颜色。Navbar 的background-color 也可以用variant 属性来改变。这些颜色可以是任何正常的 Bootstrap 默认颜色 —— info、primary、success 等。

另一个是 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-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>
        </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'
export default {
  name:'cards',
  components: {Cards},
  data() {return {};
  },
};
</script>
<style scoped>
</style>
view raw

在这里做的是创建一个 Cards 组件并将其嵌入到 HelloWorld.vue 文件中 。 请注意，在 Cards 组件中，有一个生命周期 hook 来修改数据。数据在被渲染到浏览器之前被填充到 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';  
  export default {
    name: 'navbar',
    components: {
      Navbar,
      HelloWorld
    }
  }
</script>

这是在浏览器上可以看到我们的餐饮程序运行如下：

正如你所看到的，card 没有被正确的布局，所以必须纠正这一点。幸运的是，BootstrapVue 有一些可以将我们的 card 放在网格中的内置组件。

它们是：

  • b-row
  • b-col

修改 Cards.vue 文件中的代码，使用上面提到的 BootstrapVue 组件在网格中呈现内容。打开 Cards.vue 文件并使用下面的代码片段更新：

//src/components/HelloWorld.vue
<template>
  <b-container>
    <div v-if="meals.length">
      <b-row>
        <div v-bind:key="data.index" v-for="data in meals">
          <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>
        </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>

现在刷新浏览器，应该看到一个正确布局的卡片，其中包含渲染内容。

现在有了一个排列工整的餐饮程序。我们用了一些 BootstrapVue 的组件构建了所有这些。要了解有关 BootstrapVue 的更多信息，请查看官方文档（https://bootstrap-vue.js.org/…）。

迁移

如果你想把现有项目从常规 Bootstrap4 迁移到 BootstrapVue 该怎么办？这将是一件轻而易举的事。这就是你需要做的：

  1. 从构建脚本中删除 bootstrap.js 文件
  2. 从你的程序中删除jQuery，BootstrapVue 能独立工作
  3. 将本机 Bootstrap 标记转换为 BootstrapVue 自定义组件标记

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

结论

本文通过示例演示了怎样使用 BootstrapVue。我们从安装开始，在 Vue 项目中进行设置，最后使用其自定义组件构建 Mealzers 程序的一部分。可以看到，BootstrapVue 模块简单易用。如果你有常规 Bootstrap 包的知识，那么使用 BootstrapVue 将是轻而易举的一件事。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

  • 12 个令人惊叹的 CSS 实验项目
  • 必须要会的 50 个 React 面试题
  • 世界顶级公司的前端面试都问些什么
  • 11 个最好的 JavaScript 动态效果库
  • CSS Flexbox 可视化手册
  • 从设计者的角度看 React
  • 过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！
  • CSS 粘性定位是怎样工作的
  • 一步步教你用 HTML5 SVG 实现动画效果
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩展插件
  • Node.js 多线程完全指南
  • 把 HTML 转成 PDF 的 4 个方案及实现

正文完
node.js vue.js 前端
发表至：无分类
2019-05-07
 0