快速入門BootstrapVue

教程推薦：bootstrap教程

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、孟連網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、孟連網(wǎng)絡(luò)營銷、孟連企業(yè)策劃、孟連品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供孟連建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：muchs.cn

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)行操作創(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ì)話框，如下所示：

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

現(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)用程序：

將 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ù)。

使用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-formb-nav-item-dropdownb-dropdown-itemb-navbar-toggleb-collapseb-nav-item（可以用“disabled”屬性禁用）b-navbar-navb-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>
      <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>

為了渲染剛剛創(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)行如下：

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

它們是：

b-rowb-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>
      <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>

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

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

遷移

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

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

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

結(jié)論

本文通過示例演示了怎樣使用BootstrapVue。我們從安裝開始，在Vue項(xiàng)目中進(jìn)行設(shè)置，最后使用其自定義組件構(gòu)建Mealzers程序的一部分?？梢钥吹?，BootstrapVue模塊簡單易用。如果你有常規(guī)Bootstrap包的知識(shí)，那么使用BootstrapVue將是輕而易舉的一件事。

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

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程入門??！

網(wǎng)頁標(biāo)題：快速入門BootstrapVue
URL鏈接：http://muchs.cn/article20/cheojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、ChatGPT、面包屑導(dǎo)航、網(wǎng)站改版、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營