盡管前端程序現(xiàn)在發(fā)展迅速，各種框架層出不窮，但是對(duì)廣大非前端碼農(nóng)來(lái)說(shuō)構(gòu)建Web界面的最好的選擇仍然還是Bootstrap 4。但是Bootstrap依賴于已經(jīng)嚴(yán)重過(guò)時(shí)，被拋棄的jQuery組件，那么如何解決這個(gè)問(wèn)題就迫在眉睫了。

Vue項(xiàng)目以其輕巧、高性能，易上手，雙向數(shù)據(jù)綁定，組件化的特點(diǎn)，快速流行并廣為使用，那么有沒(méi)有可能將Bootstrap的依賴改為Vue呢?答案是肯定的。

本文我們就介紹這樣一個(gè)解決方案，Bootstrap-Vue項(xiàng)目。

[[335199]]

安裝和設(shè)置

Bootstrap-Vue項(xiàng)目提供了Bootstrap項(xiàng)目中jQuery組件依賴了Vue替換方案，可以實(shí)現(xiàn)絕大多數(shù)案例和組件的替代。我們建議以Vue Cli插件方式使用，這樣可以實(shí)現(xiàn)項(xiàng)目自動(dòng)創(chuàng)建和配置，依賴項(xiàng)添加。首先我們安裝Vue Cli。

安裝Vue Cli

由于npm安裝較慢，甚至?xí)?，需要，先安裝國(guó)內(nèi)鏡像，可以使用cnpm或者npm別稱(chēng)：

然后用cnpm安裝vue.js

cnpm install -g @vue.js 

創(chuàng)建項(xiàng)目

vue create hello-chongchong 

這樣Vue CLI會(huì)自動(dòng)創(chuàng)建一個(gè)Vue項(xiàng)目，提示選擇項(xiàng)，選擇"default"即可。

進(jìn)入該項(xiàng)目目錄：

cd hello-chongchong 

使用下面的命令將Bootstrap-Vue插件添加到項(xiàng)目中。選項(xiàng)提示時(shí)，選擇 "Y"。

vue add bootstrap-vue 

這樣無(wú)需任何復(fù)雜設(shè)置就可以設(shè)置好一個(gè)以vue啟動(dòng)的Bootstrap項(xiàng)目。

清除示例

默認(rèn)情況下，Vue CLI為提供了一個(gè)示例HelloWorld應(yīng)用程序。這都沒(méi)啥用的，我們直接清除，包括App.vue和部件目錄下的 HelloWorld.vue：

>src/components/App.vue 
rm src/components/HelloWorld.vue 

示例使用

創(chuàng)建模版

Bootstrap所有功能基本都可以在bootstrap-vue中以全局注冊(cè)的組件來(lái)使用。這些組件通常和Bootstrap同名，為了以示區(qū)別，他們都以開(kāi)頭b-xxxx。

在此我們創(chuàng)建一個(gè)新的App.vue模板并添加一個(gè)Bootstrap容器：

<template> 
<b-container> 
<p>Hello, Chongchong!</p> 
</b-container> 
</template> 

然后啟用該服務(wù)

npm run serve 

然后，瀏覽器訪問(wèn)，應(yīng)該看到以下內(nèi)容：

另外，如果查看頁(yè)面源碼，可以看到該b-container組件已使用常規(guī)的Bootstrap元素和類(lèi)進(jìn)行渲染：

<div class="container"> 
<p>Hello, Chongchong!</p> 
</div> 

組件配置

許多組件都可以使用Vue道具進(jìn)行配置。例如， b-btn組件，可以在頁(yè)面中添加一個(gè)將按鈕。b-btn有一個(gè)variant控制按鈕主題，此處設(shè)置為primary。

<template> 
<b-container> 
<p>Hello, Chongchong!</p> 
<b-btn variant="primary">Click</b-btn> 
</b-container> 
</templat> 

Vue支持將動(dòng)態(tài)值綁定到Bootstrap組件。例如，對(duì)b-alert組件添加一個(gè)alert提示信息。我們將其設(shè)success并提供一些提示信息。

<template> 
<b-container> 
<p>Hello, Chongchong!</p> 
<b-btn variant="primary">Click</b-btn> 
<b-alert variant="success"> 
You clicked the button! 
</b-alert> 
</b-container> 
</template> 

可以將showprop綁定到本地data屬性來(lái)有條件地顯示信息showAlert。然后將showAlert響應(yīng)組件click事件來(lái)切換的值b-btn。

<template> 
<b-container> 
<p> Hello, Chongchong!</p> 
<b-btn 
variant="primary" 
@click="showAlert = true" 
> 
Click 
</b-btn> 
<b-alert 
v-bind:show="showAlert" 
variant="success" 
> 
You clicked the button! 
</b-alert> 
</b-container> 
</template> 
<script> 
export default { 
data: () => ({ 
showAlert: false 
}) 
}; 
</script> 

比jQuery邏輯寫(xiě)起來(lái)簡(jiǎn)單多了。

Bootstrap-Vue指令

一些Bootstrap功能是作為指令而非組件提供的，因此可以輕松地將其添加到給已有元素。

例如，要添加工具提示功能，可以使用v-b-tooltip指令。下面我們使用指令參數(shù)hover向按鈕添加一個(gè)，在按鈕懸停時(shí)觸發(fā)。

<b-btn variant="primary" @click="showAlert = true" v-b-tooltip.hover title="This button triggers the alert"> Click </b-btn> 

注：tooltip插件需要popper.js的依賴項(xiàng)，但是使用Vue CLI安裝Bootstrap-Vue，會(huì)自動(dòng)include。

總結(jié)：

利用Bootstrap-Vue 來(lái)替換Bootstrap 4中的jQuery非常容易，而且可以帶來(lái)vue cli的巨大的功能優(yōu)勢(shì)，大家可以嘗試將手頭的項(xiàng)目都替換一下。