介绍
Bootstrap是一个提供用于构建Web应用程序的常见实用程序的库。
在本教程中,您将被介绍如何在您的Vue项目中添加Boostrap使用BootstrapVue(https://bootstrap-vue.org/)。
前提条件
如果您想跟随这篇文章,您将需要:
- 熟悉 Vue 组件和特性
- 使用 Bootstrap 组件和实用程序的一些熟悉可能是有益的,但不需要
本教程是用 Node v15.11.0, 'npm' v7.6.1, 'vue' v2.6.11, 'bootstrap' v4.6.0 和 'bootstrap-vue' v2.21.2 进行验证的。
步骤1 - 设置项目
要快速设置项目,本文将建议使用 @vue/cli。
<$>[注]
**注:**本文将采用使用npx的方法,以避免全球安装@vue/cli;
<$>
1npx @vue/cli create vue-bootstrap-example --default
导航到新创建的项目目录;
1cd vue-bootstrap-example
bootstrap和bootstrap-vue可以通过npm安装,使用以下命令:
1npm install [email protected] [email protected]
然后,用代码编辑器打开main.js文件,导入并使用bootstrap-vue:
1[label src/main.js]
2import Vue from 'vue'
3import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
4import App from './App.vue'
5
6import 'bootstrap/dist/css/bootstrap.css'
7import 'bootstrap-vue/dist/bootstrap-vue.css'
8
9Vue.config.productionTip = false
10
11Vue.use(BootstrapVue)
12Vue.use(IconsPlugin)
13
14new Vue({
15 render: h => h(App),
16}).$mount('#app')
此代码将使 Bootstrap 风格和图标可用于整个 Vue 应用程序。
步骤 2 – 使用Vue组件
以下是使用 Bootstrap 卡、卡和按钮的示例组件:
1[label src/components/BootstrapExample.vue]
2<template>
3 <b-card
4 title="Card Title"
5 sub-title="Card Subtitle"
6 style="max-width: 20rem;"
7 >
8 <b-tabs>
9 <b-tab title="Tab 1">
10 <b-card-text>Tab 1 Contents</b-card-text>
11 </b-tab>
12 <b-tab title="Tab 2">
13 <b-card-text>Tab 2 Contents</b-card-text>
14 <b-button
15 size="md"
16 variant="primary"
17 >
18 Button
19 </b-button>
20 </b-tab>
21 <b-tab title="Tab 3" disabled>
22 <b-card-text>Tab 3 Contents</b-card-text>
23 </b-tab>
24 </b-tabs>
25 </b-card>
26</template>
27
28<script>
29export default {
30 name: 'BootstrapExample'
31}
32</script>
此代码将生成一张带有标题、子标题和三张卡的卡片. 卡片将被标记为Tab 1,Tab 2,Tab 3。 第三张卡片将被禁用。 与卡片的交互将显示各自的内容。 第二张卡片还将包含一个标题为按钮的按钮。
结论
在本教程中,您被介绍了 Boostrap 在您的 Vue 项目中添加 BootstrapVue。
有关您可用的组件和功能的更多信息,请参阅文档(https://bootstrap-vue.org/docs)。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。