BootstrapVue 入门[每日前端夜话0x62]

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 组件的实现。在首选目录上打开一个终端窗口,然后运行以下命令:

1vue create bootstrapvue-demo

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

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

选择 default,然后单击Enter继续:

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

1cd bootstrapvue-demo
2npm run serve

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

将 Bootstrap 和 BootstrapVue 添加到项目中

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

使用npm或yarn

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

1 # With npm
2 npm install bootstrap-vue bootstrap axios
3
4 # With yarn
5 yarn add bootstrap-vue bootstrap axios

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

Using CDN

**使用CDN **

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

1<!-- public/index.html-->
2
3<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
4<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
5<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
6
7<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
8<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
9<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

这将把每个库的缩小版和最新版本引入我们的项目中,非常简单!但是出于本文的目的,我们将使用第一个方法中的包管理器。下面继续设置BootstrapVue包。

设置BootstrapVue

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

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

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

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

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

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

 1 //src/main.js
 2 import Vue from 'vue'
 3 import App from './App.vue'
 4 import BootstrapVue from 'bootstrap-vue'
 5 import 'bootstrap/dist/css/bootstrap.css'
 6 import 'bootstrap-vue/dist/bootstrap-vue.css'
 7
 8 Vue.use(BootstrapVue)
 9 Vue.config.productionTip = false
10
11 new Vue({
12  render: h => h(App),
13}).$mount('#app')

创建Bootstrap组件

下面开始创建我们的第一个组件,第一个组件是Navbar组件转到组件目录,创建一个名为Navbar.vue的文件,并使用以下代码更新它:

 1//src/components/Navbar.vue
 2<template>
 3    <div>
 4      <b-navbar toggleable="lg" type="dark" variant="success">
 5        <b-container>
 6            <b-navbar-brand href="#">Mealzers</b-navbar-brand>
 7            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 8            <b-collapse id="nav-collapse" is-nav>
 9              <!-- Right aligned nav items -->
10              <b-navbar-nav class="ml-auto">
11                <b-nav-form>
12                  <b-form-input 
13                    size="sm" 
14                    class="mr-sm-2" 
15                    placeholder="Search for a meal"
16                    v-model="meal"
17                    ></b-form-input>
18                  <b-button 
19                    size="sm" 
20                    class="my-2 my-sm-0" 
21                    type="submit" 
22                    @click.prevent="getMeal"
23                    >Search</b-button>
24                </b-nav-form>
25                <b-nav-item-dropdown right>
26                  <!-- Using 'button-content' slot -->
27                  <template slot="button-content"><em>User</em></template>
28                  <b-dropdown-item href="#">Profile</b-dropdown-item>
29                  <b-dropdown-item href="#">Sign Out</b-dropdown-item>
30                </b-nav-item-dropdown>
31              </b-navbar-nav>
32            </b-collapse>
33          </b-container>
34      </b-navbar>
35    </div>  
36</template>
37<script>
38 export default {
39    data() {
40        return {
41            meal: ''
42        }
43    },
44  methods: {
45    getMeal() {
46      ...
47    }
48  }
49}    
50</script>

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

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

另一个是b-navbar-brand组件这是可以呈现网站徽标的地方。它还包含varianttype属性,它们可以分别用于改变background-colortext-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文件然后用下面的代码更新其内容:

 1//src/components/Cards.vue
 2<template>
 3  <b-container>
 4    <div v-if="meals.length">
 5      <b-row>
 6        <div v-bind:key="data.index" v-for="data in meals">
 7          <b-col l="4">
 8            <b-card
 9                    v-bind:title="data.strCategory"
10                    v-bind:img-src="data.strCategoryThumb"
11                    img-alt="Image"
12                    img-top
13                    tag="article"
14                    style="max-width: 20rem;"
15                    class="mb-2">
16              <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
17              <b-button href="#" variant="primary">View food</b-button>
18            </b-card>
19          </b-col>
20        </div>
21      </b-row>
22    </div>
23    <div v-else>
24      <h5>No meals available yet ?</h5>
25    </div>
26  </b-container>
27</template>
28
29<script>
30  import axios from "axios";
31  export default {
32    data() {
33      return {
34        meals: []
35      };
36    },
37    mounted() {
38      axios
39        .get("https://www.themealdb.com/api/json/v1/1/categories.php")
40        .then(response => {
41        this.meals = response.data.categories;
42      })
43        .catch(err => {
44        console.log(err);
45      });
46    }
47  };
48</script>

为了渲染刚刚创建的Cards组件,需要修改HelloWorld.vue文件。打开它并使用以下代码更新:

 1//src/components/HelloWorld.vue
 2<template>
 3  <div>
 4    <Cards />
 5  </div>
 6</template>
 7
 8<script>
 9 import Cards from './Cards.vue'
10 export default {
11  name:'cards',
12  components: {
13    Cards
14  },
15  data() {
16    return {
17
18    };
19  },
20};
21</script>
22<style scoped>
23</style>
24 view raw

在这里做的是创建一个Cards组件并将其嵌入到HelloWorld.vue文件中请注意,在Cards组件中,有一个生命周期hook来修改数据。数据在被渲染到浏览器之前被填充到b-card组件中。

接下来,更新App.vue文件,用来捕获最近的更改并将正确的组件呈现给浏览器。打开它并使用下面的代码更新:

 1//App.vue
 2<template>
 3  <div id="app">
 4    <Navbar />
 5    <HelloWorld/>
 6  </div>
 7</template>
 8<script>
 9 import HelloWorld from './components/HelloWorld.vue'
10  import Navbar from './components/Navbar.vue';  
11  export default {
12    name: 'navbar',
13    components: {
14      Navbar,
15      HelloWorld
16    }
17  }
18</script>

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

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

它们是:

  • b-row
  • b-col

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

 1//src/components/HelloWorld.vue
 2<template>
 3  <b-container>
 4    <div v-if="meals.length">
 5      <b-row>
 6        <div v-bind:key="data.index" v-for="data in meals">
 7          <b-col l="4">
 8            <b-card
 9              v-bind:title="data.strCategory"
10              v-bind:img-src="data.strCategoryThumb"
11              img-alt="Image"
12              img-top
13              tag="article"
14              style="max-width: 20rem;"
15              class="mb-2">
16              <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
17              <b-button href="#" variant="primary">View food</b-button>
18            </b-card>
19          </b-col>
20        </div>
21      </b-row>
22    </div>
23    <div v-else>
24      <h5>No meals available yet ?</h5>
25    </div>
26  </b-container>
27</template>
28<script>
29 import axios from "axios";
30 export default {
31  data() {
32    return {
33      meals: []
34    };
35  },
36  mounted() {
37    axios
38      .get("https://www.themealdb.com/api/json/v1/1/categories.php")
39      .then(response => {
40        this.meals = response.data.categories;
41      })
42      .catch(err => {
43        console.log(err);
44      });
45  }
46};
47</script>

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

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

迁移

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

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

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

结论

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

原文发布于微信公众号 - 前端先锋(jingchengyideng)

原文发表时间:2019-05-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券