溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

BootstrapVue的案例分析

發(fā)布時(shí)間：2020-09-16 13:43:46 來源：億速云 閱讀：285 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了BootstrapVue的案例分析，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

                                                           BootstrapVue的案例分析

Vue.js 是一個(gè)流行的 JavaScript 庫，用于在短時(shí)間內(nèi)開發(fā)原型。這包括用戶界面、前端應(yīng)用、靜態(tài)網(wǎng)頁和本機(jī)移動(dòng)應(yīng)用。它以易用的語法和簡單的數(shù)據(jù)綁定功能而聞名。

最近，Vue.js 生態(tài)系統(tǒng)發(fā)布了一個(gè)新的軟件包。它是流行的 Bootstrap 框架與 Vue.js 的集成。這個(gè)包稱為 BootstrapVue。它允許我們使用與 Bootstrap（v4）集成的自定義組件。

它還支持自定義 Bootstrap 組件、網(wǎng)格系統(tǒng)，還支持 Vue.js 指令。

在本文中，我們將介紹 BootstrapVue 的基礎(chǔ)知識(shí)，解釋一般概念，演示設(shè)置過程，并通過它構(gòu)建一個(gè)迷你 Vue.js 項(xiàng)目，以便為你提供更多的實(shí)踐經(jīng)驗(yàn)。

為什么選擇 BootstrapVue？

鑒于 Bootstrap是最受歡迎的獨(dú)立 CSS 框架（在我看來），很多已經(jīng)或有意向從Vanilla JavaScript 的框架轉(zhuǎn)移到 Vue.js 的開發(fā)人員總是發(fā)現(xiàn)遷移有點(diǎn)困難，因?yàn)?Bootstrap 對(duì) jQuery 的依賴性很大。

使用 BootstrapVue，任何人都可以從 Vanilla.js 或 jQuery 切換到 Vue.js，而無需擔(dān)心 Bootstrap 對(duì) jQuery 的嚴(yán)重依賴，甚至無法找到解決方法。這就是 BootstrapVue 的救援方式。它有助于彌補(bǔ)這一差距，并允許 Vue 開發(fā)人員能夠輕松地在他們的項(xiàng)目中使用 Bootstrap。

入門

使用 webpack、babel 等模塊捆綁包時(shí)，最好直接把這些包包含到項(xiàng)目中。為了給你演示并提供了解和使用 BootstrapVue 的實(shí)踐方法，我們將用 BootstrapVue 設(shè)置一個(gè) Vue.js 項(xiàng)目，并把它構(gòu)建到一個(gè)功能性的 Vue.js 應(yīng)用中。

先決條件

  • 具備 Vue.js 的基本知識(shí)可以幫你理解這個(gè)演示
  • 在你的電腦上全局安裝 Vue CLI 。如果你目前尚未安裝，請(qǐng)按照此安裝指南進(jìn)行操作

Create a Vue project

創(chuàng)建一個(gè)Vue項(xiàng)目

首先必須創(chuàng)建一個(gè) Vue.js 項(xiàng)目，我們將會(huì)用它來演示 BootstrapVue 組件的實(shí)現(xiàn)。在首選目錄上打開一個(gè)終端窗口，然后運(yùn)行以下命令：

vue create bootstrapvue-demo

如果你沒有全局安裝 Vue CLI，請(qǐng)按照此安裝指南進(jìn)行操作后再繼續(xù)本教程。

上面的命令會(huì)顯示一個(gè)預(yù)設(shè)的選擇對(duì)話框，如下所示：

BootstrapVue的案例分析

選擇 default，然后單擊Enter繼續(xù)：

BootstrapVue的案例分析

現(xiàn)在，你創(chuàng)建了一個(gè) Vue 程序，下面轉(zhuǎn)到新的 Vue 項(xiàng)目目錄，并使用以下命令啟動(dòng)開發(fā)服務(wù)器：

cd bootstrapvue-demo
npm run serve

你的 Vue 應(yīng)用程序?qū)?huì)在 localhost:8080 上提供服務(wù)。在瀏覽器中打開它，你將看到自己的Vue應(yīng)用程序：

BootstrapVue的案例分析

將 Bootstrap 和 BootstrapVue 添加到項(xiàng)目中

有兩種方法可以做到這一點(diǎn)，可以用npm和yarn這樣的包管理器或者用CDN鏈接。

使用npm或yarn

我們將使用npm或yarn安裝之前提到的包。切換到項(xiàng)目的根目錄并運(yùn)行下面的任一命令，具體取決于你首選的包管理器：

# With npm
npm install bootstrap-vue bootstrap axios

# With yarn
yarn add bootstrap-vue bootstrap axios

上面的命令將會(huì)安裝BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue組件，常規(guī)Bootstrap包含CSS文件。另外還安裝了Axios來幫助我們從themealdb API獲取程序所需的數(shù)據(jù)。

Using CDN
使用CDN

要通過CDN將Bootstrap和BootstrapVue添加到Vue項(xiàng)目，請(qǐng)打開項(xiàng)目公共文件夾中的index.html文件，并將此代碼添加到適當(dāng)?shù)奈恢茫?/p>

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

這將把每個(gè)庫的縮小版和最新版本引入我們的項(xiàng)目中，非常簡單！但是出于本文的目的，我們將使用第一個(gè)方法中的包管理器。下面繼續(xù)設(shè)置BootstrapVue包。

設(shè)置BootstrapVue

接下來，讓我們?cè)O(shè)置剛剛安裝的BootstrapVue包。轉(zhuǎn)到你的main.js文件并將這行代碼添加到頂部：

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

在這里做的事情非常簡單，我們導(dǎo)入了BoostrapVue包，然后用Vue.use()函數(shù)在程序中注冊(cè)它，以便Vue程序可以識(shí)別。

我們還需要將Bootstrap CSS文件導(dǎo)入到項(xiàng)目中。將這段代碼段添加到main.js文件中：

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

在將必要的模塊導(dǎo)入Vue程序后，你的main.js文件應(yīng)該和下面的代碼段類似：

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

創(chuàng)建Bootstrap組件

下面開始創(chuàng)建我們的第一個(gè)組件，第一個(gè)組件是Navbar組件。轉(zhuǎn)到組件目錄，創(chuàng)建一個(gè)名為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組件中包含幾個(gè)BootstrapVue組件，其中一個(gè)是b-navbar組件。它是Navbar中其他組件的父組件。如果沒有這個(gè)組件，Navbar中的所有其他組件將無法正確呈現(xiàn)。

可以用type 屬性更改Navbar上的文本顏色。 Navbar的background-color也可以用variant 屬性來改變。這些顏色可以是任何正常的Bootstrap默認(rèn)顏色 —— info、primary、success 等。

另一個(gè)是b-navbar-brand組件。這是可以呈現(xiàn)網(wǎng)站徽標(biāo)的地方。它還包含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組件的一個(gè)美妙之處在于它們默認(rèn)是響應(yīng)式的。所以你無需編寫額外的代碼或用外部庫來使其實(shí)現(xiàn)響應(yīng)式。

還有一個(gè)組件是Card組件。card 組件允許我們?cè)诳ㄖ酗@示圖像、文本等。它寫做b-card 。為了演示它，讓我們?cè)诮M件目錄中創(chuàng)建一個(gè)Cards.vue文件。然后用下面的代碼更新其內(nèi)容：

//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>
      <h6>No meals available yet</h6>
    </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>

為了渲染剛剛創(chuàng)建的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>

在這里做的是創(chuàng)建一個(gè)Cards組件并將其嵌入到HelloWorld.vue文件中。請(qǐng)注意，在Cards組件中，有一個(gè)生命周期hook來修改數(shù)據(jù)。數(shù)據(jù)在被渲染到瀏覽器之前被填充到b-card組件中。

接下來，更新App.vue文件，用來捕獲最近的更改并將正確的組件呈現(xiàn)給瀏覽器。打開它并使用下面的代碼更新：

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

這是在瀏覽器上可以看到我們的餐飲程序運(yùn)行如下：

BootstrapVue的案例分析

正如你所看到的，card 沒有被正確的布局，所以必須糾正這一點(diǎn)。幸運(yùn)的是，BootstrapVue有一些可以將我們的card放在網(wǎng)格中的內(nèi)置組件。

它們是：

  • b-row
  • b-col

修改Cards.vue文件中的代碼，使用上面提到的BootstrapVue組件在網(wǎng)格中呈現(xiàn)內(nèi)容。打開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>
      <h6>No meals available yet</h6>
    </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>

現(xiàn)在刷新瀏覽器，應(yīng)該看到一個(gè)正確布局的卡片，其中包含渲染內(nèi)容。

BootstrapVue的案例分析

現(xiàn)在有了一個(gè)排列工整的餐飲程序。我們用了一些BootstrapVue的組件構(gòu)建了所有這些。要了解有關(guān)BootstrapVue的更多信息，請(qǐng)查看官方文檔（https://bootstrap-vue.js.org/docs/）。

遷移

如果你想把現(xiàn)有項(xiàng)目從常規(guī)Bootstrap4遷移到BootstrapVue該怎么辦？這將是一件輕而易舉的事。這就是你需要做的：

  1. 從構(gòu)建腳本中刪除bootstrap.js文件
  2. 從你的程序中刪除jQuery，BootstrapVue能獨(dú)立工作
  3. 將本機(jī)Bootstrap標(biāo)記轉(zhuǎn)換為BootstrapVue自定義組件標(biāo)記

就是這些！通過這三個(gè)步驟，你可以將現(xiàn)有項(xiàng)目從依賴jQuery的常規(guī)Bootstrap遷移到更簡單的獨(dú)立BootstrapVue包，而不會(huì)破壞任何現(xiàn)有代碼。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享BootstrapVue的案例分析內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手