怎么安裝和使用BootstrapVue構(gòu)建項(xiàng)目界面

這篇文章主要講解了“怎么安裝和使用BootstrapVue構(gòu)建項(xiàng)目界面”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么安裝和使用BootstrapVue構(gòu)建項(xiàng)目界面”吧！

基于Vue的前端框架有很多，Element算一個(gè)，而B(niǎo)ootstrapVue也可以非常不錯(cuò)的一個(gè)，畢竟Bootstrap也是CSS中的大佬級(jí)別的，它和Vue的整合，使得開(kāi)發(fā)起來(lái)更加方便了。BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架。它是流行的 Bootstrap 框架與 Vue.js 的集成。這個(gè)包稱為 BootstrapVue。它允許我們使用與 Bootstrap（v4）集成的自定義組件。

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

1、BootstrapVue的安裝使用

我們假設(shè)你已經(jīng)有Vue的項(xiàng)目環(huán)境，那么BootstrapVue的安裝使用介紹就很容易了，直接使用npm安裝即可。

npm install bootstra-vue bootstrap

上面的命令將會(huì)安裝BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue組件，常規(guī)Bootstrap包含CSS文件。

接下來(lái)，讓我們?cè)O(shè)置剛剛安裝的BootstrapVue包。轉(zhuǎn)到你的main.js文件并將這行代碼添加到合適的位置，另外還需要將Bootstrap CSS文件導(dǎo)入到項(xiàng)目中。

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

那么一般簡(jiǎn)單的main.js文件內(nèi)容如下所示。

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

如果我們項(xiàng)目中使用了其他組件模塊，那么這些可能會(huì)有所不同。

2、BootstrapVue的組件使用

學(xué)習(xí)一項(xiàng)新東西，我們一般先了解一下相關(guān)的文檔。

GitHub庫(kù)的地址：https://github.com/topics/bootstrapvue

BootstrapVue的官網(wǎng)地址（可能受限無(wú)法訪問(wèn)）：https://bootstrap-vue.js.org/

BootstrapVue的中文網(wǎng)站地址如下： https://code.z01.com/bootstrap-vue/

通過(guò)在Vue項(xiàng)目中引入對(duì)應(yīng)的 BootstrapVue，那么它的相關(guān)組件使用就參考官網(wǎng)的介紹了解即可。BootstrapVue中有很多和Bootstrap一樣的組件，不過(guò)標(biāo)簽前綴需要加上b-

例如對(duì)于常用的按鈕界面代碼處理，如下所示。

<div>
  <b-button>Button</b-button>
  <b-button variant="danger">Button</b-button>
  <b-button variant="success">Button</b-button>
  <b-button variant="outline-primary">Button</b-button>
</div>

界面如下所示，很有Bootstrap的風(fēng)格！我們可以看到原先Bootstrap上的html的button加多了一個(gè)前綴b-,變?yōu)榱薭-button了。

卡片Card控件使用代碼如下所示

<div>
  <b-card
    title="Card Title"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
  >
    <b-card-text>
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </b-card-text>

    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>

其中類class中的mb-2就是邊距的定義，參考說(shuō)明如下所示。

另外可能還有接觸到 p-2,pt-2,py-2,px-2 等類似的定義，后面小節(jié)再行說(shuō)明。

另外Flex的布局也需了解下。

<div class="bg-light mb-3">
        <div class="d-flex justify-content-start bg-secondary mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-end bg-secondary mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-center bg-secondary mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-between bg-secondary mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-around bg-light mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
      </div>

界面效果如下所示。

我們來(lái)一個(gè)展示柵格的例子，顯示卡片中圖片，文字等信息。

<b-container>
      <div v-if="list.length">
        <b-row>
          <template v-for="data in list">
            <b-col sm="4" v-bind:key="data.index">
              <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>
          </template>
        </b-row>
      </div>
      <div v-else>
        <h6>No meals available yet 		

感謝各位的閱讀，以上就是“怎么安裝和使用BootstrapVue構(gòu)建項(xiàng)目界面”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么安裝和使用BootstrapVue構(gòu)建項(xiàng)目界面這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！