Vue.js 是一个流行的 JavaScript 库，用于在短时间内开发原型。这包括用户界面、前端应用、静态网页和本机移动应用。它以易用的语法和简单的数据绑定功能而闻名。
最近，Vue.js 生态系统发布了一个新的软件包。它是流行的 Bootstrap 框架与 Vue.js 的集成。这个包称为 BootstrapVue。它允许我们使用与 Bootstrap（v4）集成的自定义组件。
它还支持自定义 Bootstrap 组件、网格系统，还支持 Vue.js 指令。
在本文中，我们将介绍 BootstrapVue 的基础知识，解释一般概念，演示设置过程，并通过它构建一个迷你 Vue.js 项目，以便为你提供更多前端的相关知识可以帮你理解这个演示
创建一个Vue项目
首先必须创建一个 Vue.js 项目，我们将会用它来演示 BootstrapVue 组件的实现。在首选目录上打开一个终端窗口，然后运行以下命令：
vue create bootstrapvue-demo
如果你没有全局安装 Vue CLI，请按照此安装指南进行操作后再继续本教程。
上面的命令会显示一个预设的选择对话框，如下所示：
选择 default，然后单击Enter继续：
现在，你创建了一个 Vue 程序，下面转到新的 Vue 项目目录，并使用以下命令启动开发服务器：
cd bootstrapvue-demo npm run serve
你的 Vue 应用程序将会在 localhost:8080 上提供服务。在浏览器中打开它，你将看到自己的Vue应用程序：
将 Bootstrap 和 BootstrapVue 添加到项目中
有两种方法可以做到这一点，可以用npm和yarn这样的包管理器或者用CDN链接。
使用npm或yarn
我们将使用npm或yarn安装之前提到的包。切换到项目的根目录并运行下面的任一命令，具体取决于你首选的包管理器：
# With npm npm install bootstrap-vue bootstrap axios # With yarn yarn add bootstrap-vue bootstrap axios
上面的命令将会安装BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue组件，常规Bootstrap包含CSS文件。另外还安装了Axios来帮助我们从themealdb API获取程序所需的数据。
使用CDN
要通过CDN将Bootstrap和BootstrapVue添加到Vue项目，请打开项目公共文件夹中的index.html文件，并将此代码添加到适当的位置：
<!-- public/index.html-->
<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
<link type="text/css" rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet"
href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
这将把每个库的缩小版和最新版本引入我们的项目中，非常简单！但是出于本文的目的，我们将使用第一个方法中的包管理器。下面继续设置BootstrapVue包。
设置BootstrapVue
接下来，让我们设置刚刚安装的BootstrapVue包。转到你的main.js文件并将这行代码添加到顶部：
//src/main.js import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue)
在这里做的事情非常简单，我们导入了BoostrapVue包，然后用Vue.use()函数在程序中注册它，以便Vue程序可以识别。
我们还需要将Bootstrap CSS文件导入到项目中。将这段代码段添加到main.js文件中：
//src/main.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
在将必要的模来&源gao@dai!ma.com搞$代^码%网块导入Vue程序后，你的main.js文件应该和下面的代码段类似：
//src/main.js
import 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 = false
new Vue({
render: h => h(App),
}).$mount('#app')
创建Bootstrap组件
下面开始创建我们的第一个组件，第一个组件是Navbar组件。转到组件目录，创建一个名为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组件中包含几个BootstrapVue组件，其中一个是b-navbar组件。它是Navbar中其他组件的父组件。如果没有这个组件，Navbar中的所有其他组件将无法正确呈现。
可以用type 属性更改Navbar上的文本颜色。 Navbar的background-color也可以用variant 属性来改变。这些颜色可以是任何正常的Bootstrap默认颜色 —— info、primary、success 等。
另一个是b-navbar-brand组件。这是可以呈现网站徽标的地方。它还包含variant和type属性，它们可以分别用于改变background-color和text-color。
其他BootstrapVue组件是：
- b-nav-form
- b-nav-item-dropdown
- b-dropdown-item
- b-navbar-toggle
- b-collapse
- b-nav-item（可以用“disabled”属性禁用）
- b-navbar-nav
- b-nav-item
- 更多前端的相关知识，那么使用BootstrapVue将是轻而易举的一件事。
英文地址原文：https://blog.logrocket.com/getting-started-with-bootstrapvue-2d8bf907ef11
为了保证的可读性，本文采用意译而非直译。
以上就是BootstrapVue快速入门的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：BootstrapVue快速入门
