Vue CLI Bootstrap 是一款基于 Vue CLI 的前端構建工具,提供了基于 Bootstrap 的模板和組件,讓開發(fā)者可以更快速地構建響應式的 Web 應用程序。
使用 Vue CLI Bootstrap 可以省略手動安裝 Bootstrap 和配置 Vue 項目的繁瑣步驟,只需在安裝 Vue CLI 后,通過命令行工具創(chuàng)建項目,選擇 Vue CLI Bootstrap 的模板即可快速搭建項目框架。
vue create my-project
cd my-project
vue add bootstrap
使用上述命令創(chuàng)建 Vue 項目,并使用 Vue CLI Bootstrap 的模板初始化項目后,可以在項目中使用 Bootstrap 的組件來開發(fā)頁面,同時也可以根據(jù)自己的需求修改 Bootstrap 的主題樣式。
<template>
<div class="container">
<h1>Vue CLI Bootstrap</h1>
<b-button variant="primary" @click="showModal">Open Modal</b-button>
<b-modal v-model="show" title="Bootstrap Modal">
<p>Hello Vue CLI Bootstrap</p>
</b-modal>
</div>
</template>
<script>
import { BButton, BModal } from 'bootstrap-vue'
export default {
components: {
BButton,
BModal
},
data () {
return {
show: false
}
},
methods: {
showModal () {
this.show = true
}
}
}
</script>
以上示例展示了如何在 Vue 組件中使用 Vue CLI Bootstrap 提供的組件,其中的 BButton 和 BModal 都是 Bootstrap 的組件,只需在引入聲明時指定組件名即可使用。