溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了BootstrapVue的案例分析，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
Vue.js 是一個流行的 JavaScript 庫，用于在短時間內開發原型。這包括用戶界面、前端應用、靜態網頁和本機移動應用。它以易用的語法和簡單的數據綁定功能而聞名。
最近，Vue.js 生態系統發布了一個新的軟件包。它是流行的 Bootstrap 框架與 Vue.js 的集成。這個包稱為 BootstrapVue。它允許我們使用與 Bootstrap（v4）集成的自定義組件。
它還支持自定義 Bootstrap 組件、網格系統，還支持 Vue.js 指令。
在本文中，我們將介紹 BootstrapVue 的基礎知識，解釋一般概念，演示設置過程，并通過它構建一個迷你 Vue.js 項目，以便為你提供更多的實踐經驗。
鑒于 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 項目，我們將會用它來演示 BootstrapVue 組件的實現。在首選目錄上打開一個終端窗口，然后運行以下命令：
vue create bootstrapvue-demo
如果你沒有全局安裝 Vue CLI，請按照此安裝指南進行操作后再繼續本教程。
上面的命令會顯示一個預設的選擇對話框，如下所示：
選擇 default，然后單擊Enter繼續：
現在，你創建了一個 Vue 程序，下面轉到新的 Vue 項目目錄，并使用以下命令啟動開發服務器：
cd bootstrapvue-demo npm run serve
你的 Vue 應用程序將會在 localhost:8080 上提供服務。在瀏覽器中打開它，你將看到自己的Vue應用程序：
有兩種方法可以做到這一點，可以用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將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包。轉到你的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')下面開始創建我們的第一個組件，第一個組件是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組件是：
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>
<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>為了渲染剛剛創建的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放在網格中的內置組件。
它們是：
修改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>
<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>現在刷新瀏覽器，應該看到一個正確布局的卡片，其中包含渲染內容。
現在有了一個排列工整的餐飲程序。我們用了一些BootstrapVue的組件構建了所有這些。要了解有關BootstrapVue的更多信息，請查看官方文檔（https://bootstrap-vue.js.org/docs/）。
如果你想把現有項目從常規Bootstrap4遷移到BootstrapVue該怎么辦？這將是一件輕而易舉的事。這就是你需要做的：
bootstrap.js文件jQuery，BootstrapVue能獨立工作就是這些！通過這三個步驟，你可以將現有項目從依賴jQuery的常規Bootstrap遷移到更簡單的獨立BootstrapVue包，而不會破壞任何現有代碼。
感謝你能夠認真閱讀完這篇文章，希望小編分享BootstrapVue的案例分析內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
