翻譯：瘋狂的技術(shù)宅
原文：https://blog./ge...
本文首發(fā)微信公眾號(hào)：前端先鋒
Vue.js 是一個(gè)流行的 JavaScript 庫(kù)，用于在短時(shí)間內(nèi)開發(fā)原型。這包括用戶界面、前端應(yīng)用、靜態(tài)網(wǎng)頁(yè)和本機(jī)移動(dòng)應(yīng)用。它以易用的語(yǔ)法和簡(jiǎn)單的數(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 框架（在我看來(lái)），很多已經(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，而無(wú)需擔(dān)心 Bootstrap 對(duì) jQuery 的嚴(yán)重依賴，甚至無(wú)法找到解決方法。這就是 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)用中。 先決條件 Create a Vue project創(chuàng)建一個(gè)Vue項(xiàng)目首先必須創(chuàng)建一個(gè) Vue.js 項(xiàng)目，我們將會(huì)用它來(lái)演示 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 npmnpm install bootstrap-vue bootstrap axios# With yarnyarn add bootstrap-vue bootstrap axios
上面的命令將會(huì)安裝BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue組件，常規(guī)Bootstrap包含CSS文件。另外還安裝了Axios來(lái)幫助我們從themealdb API獲取程序所需的數(shù)據(jù)。 Using CDN使用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:///bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="https:///bootstrap-vue@latest/dist/bootstrap-vue.min.css"/><!-- Add Vue and BootstrapVue scripts just before the closing </body> tag --><script src="https:///vue/dist/vue.min.js"></script><script src="https:///bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
這將把每個(gè)庫(kù)的縮小版和最新版本引入我們的項(xiàng)目中，非常簡(jiǎn)單！但是出于本文的目的，我們將使用第一個(gè)方法中的包管理器。下面繼續(xù)設(shè)置BootstrapVue包。 設(shè)置BootstrapVue接下來(lái)，讓我們?cè)O(shè)置剛剛安裝的BootstrapVue包。轉(zhuǎn)到你的main.js文件并將這行代碼添加到頂部： //src/main.jsimport BootstrapVue from 'bootstrap-vue'Vue.use(BootstrapVue)
在這里做的事情非常簡(jiǎn)單，我們導(dǎo)入了BoostrapVue包，然后用Vue.use()函數(shù)在程序中注冊(cè)它，以便Vue程序可以識(shí)別。 我們還需要將Bootstrap CSS文件導(dǎo)入到項(xiàng)目中。將這段代碼段添加到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)建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中的所有其他組件將無(wú)法正確呈現(xiàn)。 可以用type 屬性更改Navbar上的文本顏色。 Navbar的background-color也可以用variant 屬性來(lái)改變。這些顏色可以是任何正常的Bootstrap默認(rèn)顏色 —— info、primary、success 等。 另一個(gè)是b-navbar-brand組件。這是可以呈現(xiàn)網(wǎng)站徽標(biāo)的地方。它還包含variant和type屬性，它們可以分別用于改變background-color和text-color。 其他BootstrapVue組件是： BootstrapVue組件的一個(gè)美妙之處在于它們默認(rèn)是響應(yīng)式的。所以你無(wú)需編寫額外的代碼或用外部庫(kù)來(lái)使其實(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./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)建一個(gè)Cards組件并將其嵌入到HelloWorld.vue文件中。請(qǐng)注意，在Cards組件中，有一個(gè)生命周期hook來(lái)修改數(shù)據(jù)。數(shù)據(jù)在被渲染到瀏覽器之前被填充到b-card組件中。 接下來(lái)，更新App.vue文件，用來(lái)捕獲最近的更改并將正確的組件呈現(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)置組件。 它們是： 修改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./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./...）。 遷移如果你想把現(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遷移到更簡(jiǎn)單的獨(dú)立BootstrapVue包，而不會(huì)破壞任何現(xiàn)有代碼。 結(jié)論本文通過示例演示了怎樣使用BootstrapVue。我們從安裝開始，在Vue項(xiàng)目中進(jìn)行設(shè)置，最后使用其自定義組件構(gòu)建Mealzers程序的一部分?？梢钥吹剑珺ootstrapVue模塊簡(jiǎn)單易用。如果你有常規(guī)Bootstrap包的知識(shí)，那么使用BootstrapVue將是輕而易舉的一件事。
|
