儘管前端程式現在發展迅速，各種框架層出不窮，但是對廣大非前端碼農來說構建Web介面的最好的選擇仍然還是Bootstrap 4。但是Bootstrap依賴於已經嚴重過時，被拋棄的jQuery元件，那麼如何解決這個問題就迫在眉睫了。

Vue專案以其輕巧、高效能，易上手，雙向資料繫結，元件化的特點，快速流行並廣為使用，那麼有沒有可能將Bootstrap的依賴改為Vue呢？答案是肯定的。

本文我們就介紹這樣一個解決方案，Bootstrap-Vue專案。

安裝和設定

Bootstrap-Vue專案提供了Bootstrap專案中jQuery元件依賴了Vue替換方案，可以實現絕大多數案例和元件的替代。我們建議以Vue Cli外掛方式使用，這樣可以實現專案自動建立和配置，依賴項新增。首先我們安裝Vue Cli

安裝Vue Cli

由於npm安裝較慢，甚至會失敗，需要，先安裝國內映象，可以使用cnpm或者npm別稱：

然後用cnpm安裝vue.js

cnpm install -g @vue.js

建立專案

vue create hello-chongchong

這樣Vue CLI會自動建立一個Vue專案，提示選擇項，選擇"default"即可。

進入該專案目錄：

cd hello-chongchong

使用下面的命令將Bootstrap-Vue外掛新增到專案中。選項提示時，選擇 "Y"。

vue add bootstrap-vue

這樣無需任何複雜設定就可以設定好一個以vue啟動的Bootstrap專案。

清除示例

預設情況下，Vue CLI為提供了一個示例HelloWorld應用程式。這都沒啥用的，我們直接清除，包括App.vue和部件目錄下的 HelloWorld.vue：

>src/components/App.vuerm src/components/HelloWorld.vue示例使用建立模版

Bootstrap所有功能基本都可以在bootstrap-vue中以全域性註冊的元件來使用。這些元件通常和Bootstrap同名，為了以示區別，他們都以開頭b-xxxx。

在此我們建立一個新的App.vue模板並新增一個Bootstrap容器：

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

然後啟用該服務

然後，瀏覽器訪問，應該看到以下內容：

另外，如果檢視頁面原始碼，可以看到該b-container元件已使用常規的Bootstrap元素和類進行渲染：

<div class="container"><p>Hello, Chongchong!</p></div>元件配置

許多元件都可以使用Vue道具進行配置。例如， b-btn元件，可以在頁面中新增一個將按鈕。b-btn有一個variant控制按鈕主題，此處設定為primary。

Vue支援將動態值繫結到Bootstrap元件。例如，對b-alert元件新增一個alert提示資訊。我們將其設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屬性來有條件地顯示資訊showAlert。然後將showAlert響應元件click事件來切換的值b-btn。

比jQuery邏輯寫起來簡單多了。

Bootstrap-Vue指令

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

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

注：tooltip外掛需要popper.js的依賴項，但是使用Vue CLI安裝Bootstrap-Vue，會自動include。

總結：

利用Bootstrap-Vue 來替換Bootstrap 4中的jQuery非常容易，而且可以帶來vue cli的巨大的功能優勢，大家可以嘗試將手頭的專案都替換一下。