快速上手BootstrapVue

时间  2019-11-05
标签 快速 上手 bootstrapvue 繁體版
原文   原文链接
翻译：疯狂的技术宅
原文： https://blog.logrocket.com/ge...

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

clipboard.png

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

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

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

为何选择 BootstrapVue？

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

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

入门

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

先决条件webpack

  • 具有 Vue.js 的基本知识能够帮你理解这个演示
  • 在你的电脑上全局安装 Vue CLI 。若是你目前还没有安装，请按照此安装指南进行操做

Create a Vue project

建立一个Vue项目

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

vue create bootstrapvue-demo

若是你没有全局安装 Vue CLI，请按照此安装指南进行操做后再继续本教程。程序员

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

clipboard.png

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

clipboard.png

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

cd bootstrapvue-demo
npm run serve

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

clipboard.png

将 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>

这是在浏览器上能够看到咱们的餐饮程序运行以下：

clipboard.png

正如你所看到的，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>

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

clipboard.png

如今有了一个排列工整的餐饮程序。咱们用了一些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将是垂手可得的一件事。

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

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

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程