Vue中怎么構(gòu)建一個(gè)Bootstrap 4 應(yīng)用

Vue中怎么構(gòu)建一個(gè)Bootstrap 4 應(yīng)用，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

安裝和設(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別稱：

然后用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元素和類進(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邏輯寫起來(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。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。