翻譯：瘋狂的技術(shù)宅
原文：https://blog.logrocket.com/ge...
本文首發(fā)微信公眾號：前端先鋒
Vue.js 是一個流行的 JavaScript 庫，用于在短時間內(nèi)開發(fā)原型。這包括用戶界面、前端應(yīng)用、靜態(tài)網(wǎng)頁和本機移動應(yīng)用。它以易用的語法和簡單的數(shù)據(jù)綁定功能而聞名。
最近，Vue.js 生態(tài)系統(tǒng)發(fā)布了一個新的軟件包。它是流行的 Bootstrap 框架與 Vue.js 的集成。這個包稱為 BootstrapVue。它允許我們使用與 Bootstrap（v4）集成的自定義組件。
它還支持自定義 Bootstrap 組件、網(wǎng)格系統(tǒng)，還支持 Vue.js 指令。
在本文中，我們將介紹 BootstrapVue 的基礎(chǔ)知識，解釋一般概念，演示設(shè)置過程，并通過它構(gòu)建一個迷你 Vue.js 項目，以便為你提供更多的實踐經(jīng)驗。
鑒于 Bootstrap是最受歡迎的獨立 CSS 框架（在我看來），很多已經(jīng)或有意向從Vanilla JavaScript 的框架轉(zhuǎn)移到 Vue.js 的開發(fā)人員總是發(fā)現(xiàn)遷移有點困難，因為 Bootstrap 對 jQuery 的依賴性很大。
使用 BootstrapVue，任何人都可以從 Vanilla.js 或 jQuery 切換到 Vue.js，而無需擔(dān)心 Bootstrap 對 jQuery 的嚴(yán)重依賴，甚至無法找到解決方法。這就是 BootstrapVue 的救援方式。它有助于彌補這一差距，并允許 Vue 開發(fā)人員能夠輕松地在他們的項目中使用 Bootstrap。
使用 webpack、babel 等模塊捆綁包時，最好直接把這些包包含到項目中。為了給你演示并提供了解和使用 BootstrapVue 的實踐方法，我們將用 BootstrapVue 設(shè)置一個 Vue.js 項目，并把它構(gòu)建到一個功能性的 Vue.js 應(yīng)用中。
先決條件
具備 Vue.js 的基本知識可以幫你理解這個演示
在你的電腦上全局安裝 Vue CLI 。如果你目前尚未安裝，請按照此安裝指南進行操作
首先必須創(chuàng)建一個 Vue.js 項目，我們將會用它來演示 BootstrapVue 組件的實現(xiàn)。在首選目錄上打開一個終端窗口，然后運行以下命令：
vue create bootstrapvue-demo如果你沒有全局安裝 Vue CLI，請按照此安裝指南進行操作后再繼續(xù)本教程。
上面的命令會顯示一個預(yù)設(shè)的選擇對話框，如下所示：
選擇 default，然后單擊Enter繼續(xù)：
現(xiàn)在，你創(chuàng)建了一個 Vue 程序，下面轉(zhuǎn)到新的 Vue 項目目錄，并使用以下命令啟動開發(fā)服務(wù)器：
cd bootstrapvue-demonpm run serve你的 Vue 應(yīng)用程序?qū)?localhost:8080 上提供服務(wù)。在瀏覽器中打開它，你將看到自己的Vue應(yīng)用程序：
有兩種方法可以做到這一點，可以用npm和yarn這樣的包管理器或者用CDN鏈接。
使用npm或yarn
我們將使用npm或yarn安裝之前提到的包。切換到項目的根目錄并運行下面的任一命令，具體取決于你首選的包管理器：
# With npmnpm install bootstrap-vue bootstrap axios# With yarnyarn add bootstrap-vue bootstrap axios上面的命令將會安裝BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue組件，常規(guī)Bootstrap包含CSS文件。另外還安裝了Axios來幫助我們從themealdb API獲取程序所需的數(shù)據(jù)。
要通過CDN將Bootstrap和BootstrapVue添加到Vue項目，請打開項目公共文件夾中的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>這將把每個庫的縮小版和最新版本引入我們的項目中，非常簡單！但是出于本文的目的，我們將使用第一個方法中的包管理器。下面繼續(xù)設(shè)置BootstrapVue包。
接下來，讓我們設(shè)置剛剛安裝的BootstrapVue包。轉(zhuǎn)到你的main.js文件并將這行代碼添加到頂部：
//src/main.jsimport BootstrapVue from 'bootstrap-vue'Vue.use(BootstrapVue)在這里做的事情非常簡單，我們導(dǎo)入了BoostrapVue包，然后用Vue.use()函數(shù)在程序中注冊它，以便Vue程序可以識別。
我們還需要將Bootstrap CSS文件導(dǎo)入到項目中。將這段代碼段添加到main.js文件中：
//src/main.jsimport 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'在將必要的模塊導(dǎo)入Vue程序后，你的main.js文件應(yīng)該和下面的代碼段類似：
//src/main.jsimport 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 = falsenew Vue({ render: h => h(App),}).$mount('#app')下面開始創(chuàng)建我們的第一個組件，第一個組件是Navbar組件。轉(zhuǎn)到組件目錄，創(chuàng)建一個名為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中的所有其他組件將無法正確呈現(xiàn)。
可以用type 屬性更改Navbar上的文本顏色。 Navbar的background-color也可以用variant 屬性來改變。這些顏色可以是任何正常的Bootstrap默認(rèn)顏色 —— info、primary、success 等。
另一個是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組件的一個美妙之處在于它們默認(rèn)是響應(yīng)式的。所以你無需編寫額外的代碼或用外部庫來使其實現(xiàn)響應(yīng)式。
還有一個組件是Card組件。card 組件允許我們在卡中顯示圖像、文本等。它寫做b-card 。為了演示它，讓我們在組件目錄中創(chuàng)建一個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>view raw在這里做的是創(chuàng)建一個Cards組件并將其嵌入到HelloWorld.vue文件中。請注意，在Cards組件中，有一個生命周期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>這是在瀏覽器上可以看到我們的餐飲程序運行如下：
正如你所看到的，card 沒有被正確的布局，所以必須糾正這一點。幸運的是，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> <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)該看到一個正確布局的卡片，其中包含渲染內(nèi)容。
現(xiàn)在有了一個排列工整的餐飲程序。我們用了一些BootstrapVue的組件構(gòu)建了所有這些。要了解有關(guān)BootstrapVue的更多信息，請查看官方文檔（https://bootstrap-vue.js.org/...）。
如果你想把現(xiàn)有項目從常規(guī)Bootstrap4遷移到BootstrapVue該怎么辦？這將是一件輕而易舉的事。這就是你需要做的：
從構(gòu)建腳本中刪除bootstrap.js文件
從你的程序中刪除jQuery，BootstrapVue能獨立工作
將本機Bootstrap標(biāo)記轉(zhuǎn)換為BootstrapVue自定義組件標(biāo)記
就是這些！通過這三個步驟，你可以將現(xiàn)有項目從依賴jQuery的常規(guī)Bootstrap遷移到更簡單的獨立BootstrapVue包，而不會破壞任何現(xiàn)有代碼。
本文通過示例演示了怎樣使用BootstrapVue。我們從安裝開始，在Vue項目中進行設(shè)置，最后使用其自定義組件構(gòu)建Mealzers程序的一部分。可以看到，BootstrapVue模塊簡單易用。如果你有常規(guī)Bootstrap包的知識，那么使用BootstrapVue將是輕而易舉的一件事。
