Как использовать библиотеку Bootstrap в Vue.js

Development, Java | Amber | Комментировать запись

Bootstrap – это библиотека, которая предоставляет общие утилиты для сборки веб-приложений.

В этом мануале вы узнаете, как добавить Boostrap в свой проект Vue при помощи инструмента BootstrapVue.

Требования

Чтобы следовать этим инструкциям, вам понадобится:

• Общее понимание компонентов 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.

Примечание: Чтобы избежать глобальной установки @vue/cli, мы воспользуемся npx.

npx @vue/cli create vue-bootstrap-example  --default

Теперь перейдите в полученный каталог:

cd vue-bootstrap-example

Установить bootstrap и bootstrap-vue можно при помощи следующей команды:

npm install bootstrap@4.6.0 bootstrap-vue@2.21.2

После этого откройте файл main.js в редакторе кода. Импортируйте bootstrap-vue:

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'

import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false
Vue.use(BootstrapVue)

Vue.use(IconsPlugin)
new Vue({
render: h => h(App),
}).$mount('#app')

В результате у вашего приложения Vue появится доступ к стилям и иконкам Bootstrap.

2: Использование компонентов Vue

Ниже вы найдете пример компонента, который использует карточки, вкладки и кнопки Bootstrap:

src/components/BootstrapExample.vue

<template>
<b-card
title="Card Title"
sub-title="Card Subtitle"
style="max-width: 20rem;"
>
<b-tabs>
<b-tab title="Tab 1">
<b-card-text>Tab 1 Contents</b-card-text>
</b-tab>
<b-tab title="Tab 2">
<b-card-text>Tab 2 Contents</b-card-text>
<b-button
size="md"
variant="primary"
>
Button
</b-button>
</b-tab>
<b-tab title="Tab 3" disabled>
<b-card-text>Tab 3 Contents</b-card-text>
</b-tab>
</b-tabs>
</b-card>
</template>
<script>
export default {
name: 'BootstrapExample'
}
</script>

Этот код создаст карточку с заголовком, подзаголовком и тремя вкладками. Вкладки будут помечены как Tab 1, Tab 2, Tab 3. При взаимодействии с вкладками будет отображаться соответствующий контент. Вторая вкладка будет содержать кнопку под названием Button. Третья вкладка будет отключена с помощью параметра disabled.

Заключение

Итак, в этом руководстве мы вкратце показали, как добавить библиотеку Boostrap в проект Vue с помощью BootstrapVue.

За дополнительной информацией о доступных компонентах и функциях можно обратиться к документации.

Если же вы хотите узнать о Vue.js больше и потренироваться в работе с этим инструментом, посетите специальный раздел нашего Информатория.