hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

疾速入门BootstrapVue_WEB前端开发

2020-09-16前端开发搜奇网6°c
A+ A-

教程引荐:bootstrap教程

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 。假如你如今还没有装置,请按照此装置指南举行操纵

建立一个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猎取程序所需的数据。

运用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默许色彩 —— 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文件然后用下面的代码更新其内容:

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

在这里做的是建立一个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/docs/)。

迁徙

假如你想把现有项目从通例Bootstrap4迁徙到BootstrapVue该怎么办?这将是一件易如反掌的事。这就是你须要做的:

  1. 从构建剧本中删除bootstrap.js文件
  2. 从你的程序中删除jQuery,BootstrapVue能自力事情
  3. 将本机Bootstrap标记转换为BootstrapVue自定义组件标记

就是这些!经由过程这三个步骤,你能够将现有项目从依靠jQuery的通例Bootstrap迁徙到更简朴的自力BootstrapVue包,而不会损坏任何现有代码。

结论

本文经由过程示例演示了如何运用BootstrapVue。我们从装置入手下手,在Vue项目中举行设置,末了运用其自定义组件构建Mealzers程序的一部分。能够看到,BootstrapVue模块简朴易用。假如你有通例Bootstrap包的学问,那末运用BootstrapVue将是易如反掌的一件事。

英文地点原文:https://blog.logrocket.com/getting-started-with-bootstrapvue-2d8bf907ef11

更多编程相干学问,请接见:编程入门!!

以上就是疾速入门BootstrapVue的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
疾速入门BootstrapVue_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/300752.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

推荐阅读