快速上手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教程