Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

От автора: в этой статье мы рассмотрим, как интегрировать Bootstrap Vue js с помощью Bootstrap-Vue. React и Vue.js — две ведущие современные JavaScript-системы для разработки интерфейса. В то время, как React имеет крутую кривую обучения, сложный процесс сборки (если вы выходите из мира jQuery), все, что вам нужно сделать, чтобы начать использовать Vue.js — это просто импортировать скрипт.

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

Bootstrap стал популярным фреймворком HTML / CSS для создания мобильных адаптивных сайтов. Однако для своих основных функций он, как правило, использует jQuery, а также обширный список компонентов, таких как оповещения и модальные элементы. Поэтому мы рассмотрим, как использовать Bootstrap с Vue.js, тем самым устраняя необходимость в jQuery.

Введение в Bootstrap

Разработанный в конце 2011 года Марком Отто и Джейкобом Торнтоном из Twitter Inc., Bootstrap вскоре стал популярен за пределами Twitter после того, как был выпущен с открытым исходным кодом. Он продолжал развиваться, как самый быстрый интерфейс для веб-разработчиков по всему миру.

Сегодня Bootstrap стал де-факто стандартом для запуска нового проекта веб-сайта, с его архитектурой CSS и JS, обеспечивающей мобильные адаптивные компоненты пользовательского интерфейса, а также поддержку большинства современных браузеров.

Связывание Bootstrap с Vue.js

Как мы упоминали ранее, использование с Bootstrap с Vue.js несколько сложно, из-за сильной зависимости динамических компонентов Bootstrap от jQuery. Однако есть, по крайней мере, несколько хороших проектов (очень ранние сборки, поэтому не ожидайте, что все будет проверено), которые находятся в процессе преодоления этого разрыва: Bootstrap-Vue, VueStrap.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Мы рассмотрим первый из них, Bootstrap-Vue, так как это самый популярный проект.

Bootstrap-Vue

Bootstrap-Vue поддерживает не только компоненты Bootstrap и систему сеток, но также включает поддержку Vue.js Directives, что дает нам полный набор функций из экосистемы Vue.js.

Одной из замечательных особенностей Bootstrap-Vue является то, что у него есть онлайн Playground. Эта площадка является перезагружаемой, а также позволяет экспортировать код в JSFiddle. Разве это не круто!

Я считаю, что для успеха любого программного проекта необходима хорошая документация и экосистема разработчиков, и у Bootstrap-Vue все в порядке по обоим пунктам.

Начало работы с Bootstrap-Vue с использованием командной строки

Если вы следуете современным тенденциям в области веб-разработки, вы наверняка знаете о npm и установке библиотек с его помощью. Bootstrap-Vue можно установить через npm с помощью следующей команды:

npm i bootstrap-vue

Bootstrap-Vue также предоставляет два шаблона vue-cli, которые могут использоваться для разработки:

Webpack Simple: быстрое решение для небольшого приложения.

Webpack: для проектов с широким функционалом.

Сначала мы устанавливаем vue-cli:

npm i -g vue-cli

Затем мы инициализируем проект — давайте назовем его getting-started — используя простой веб-пакет, введя в терминале следующее:

$ vue init bootstrap-vue/webpack-simple getting-started

$ cd getting-started
$ npm install
$ npm run dev

Давайте разберем этот код по строкам:

Первая строка начинается с того, что vue init создает новый каталог с именем get-started, где инициализируется новый проект Bootstrap-Vue.

При запуске cd мы получаем доступ к каталогу нового проекта.

npm install отвечает за установку всех зависимостей проекта.

Наконец, с помощью npm run dev приложение компилируется и запускается в браузере.

Теперь ваша локальная среда должна содержать следующие файлы и папки:

├── index.html
├── node_modules
├── README.md
├── package.json
├── src
│ ├── App.vue
│ ├── assets
 ├── logo.png
│ ├── main.js
└── webpack.config.js

Здесь в первую очередь стоит обратить внимание на файлы App.vue и main.js. Если мы запустим текстовый редактор и откроем main.js, мы увидим следующий код, который импортирует таблицу стилей Bootstrap и Bootstrap-Vue:

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

new Vue({
  el: '#app',
  render: h => h(App)
})

В то же время в документе App.vue загружается внешний код. После запуска команды dev npm run, страница проекта index.html должна отобразить страницу, как показано ниже:

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

Импорт Bootstrap-Vue с помощью тега script в разделе head

Мы рассмотрели способ установки и работы с Bootstrap-Vue через npm, давайте также рассмотрим более простой вариант: включение Bootstrap-Vue, используя тег script в разделе head HTML-документа:

<!-- Add Bootstrap, Bootstrap-Vue CSS, Vue,
Babel, and Bootstrap-Vue JS to the <head> section -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

Теперь мы можем работать с Vue.js, Bootstrap и Vue-Bootstrap на локальной машине.

Работа с компонентами Bootstrap-Vue

Для целей демонстрации в этой статье мы будем использовать CodePen. Чтобы настроить его, давайте создадим Pen, после этого нажмите иконку настроек и импортируйте следующий CSS на вкладку CSS:


https://unpkg.com/bootstrap@4.0.0/dist/css/bootstrap.min.css


https://unpkg.com/bootstrap-vue@2.0.0-rc.1/dist/bootstrap-vue.css

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

На вкладке Javascript давайте импортируем библиотеки Vue и Bootstrap Vue:


https://unpkg.com/vue@2.5.13/dist/vue.min.js


https://unpkg.com/bootstrap-vue@2.0.0-rc.1/dist/bootstrap-vue.js

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

После этого нажмите кнопку Save & Close. Теперь мы готовы начать работать с компонентами Bootstrap-Vue.

Создание компонента оповещения Bootstrap-Vue

Чтобы создать компонент оповещения Bootstrap-Vue, мы добавим следующее в раздел CodePen HTML:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
<div id='app'>
  <b-alert show> Hello {{ name }}! </b-alert>
</div>

Затем добавим экземпляр Vue в раздел JS:

window.onload = function() {
  new Vue({
 el: '#app',
 data: {
 name: 'Sitepoint' 
 },
  })
}

В результате мы увидим оповещение «Hello Sitepoint!» в области просмотра результата:

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

В приведенном выше коде отображается простой компонент оповещения Bootstrap с использованием Vue.js и Bootstrap-Vue. Затем мы изменим некоторые параметры этого блока оповещения, чтобы сделать его более интересным. Например, чтобы сделать блок оповещения скрываемым, добавим ключевое слово dismissible после директивы show:

<b-alert show dismissible> Hello {{ name }}! </b-alert>

Теперь в оповещении отображается кнопка закрытия, которая при нажатии удаляет оповещение со страницы. Попробуйте сами! Информацию о других параметрах конфигурации вы можете найти в официальной документации по оповещениям Bootstrap-Vue.

Создание динамического компонента списка с помощью Bootstrap-Vue

Итак, теперь, когда у нас есть понимание того, как использовать Bootstrap-Vue, давайте создадим компонент списка. Это, пожалуй, самая распространенная часть пользовательского интерфейса, которую вы найдете практически в людбом веб- и мобильном приложении.

Bootstrap-Vue предоставляет два компонента, которые вместе помогают нам создавать списки: <b-list-group> и <b-list-group-item>. Мы можем представить себе первый, как эквивалент HTML-тега ul или ol, а второй — как элемент li.
Начнем с создания статического списка определенных смартфонов:

<div id='app'>
  <b-list-group>
 <b-list-group-item href="http://apple.com">iPhone</b-list-group-item>
 <b-list-group-item>OnePlus 3T</b-list-group-item>
 <b-list-group-item>Samsung Galaxy 8</b-list-group-item>
  </b-list-group>
</div>

Теперь добавим экземпляр Vue в панель JavaScript:

window.onload = function() {
  new Vue({
 el: '#app'
  })
}

И вот наш простой список:

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

Однако это далеко не динамический список. Давайте добавим внутри разметки компонента списка директиву Vue.js v-for, чтобы отобразить несколько элементов списка из массива:

<b-list-group-item v-for="item in items">
  {{ item.message }}
</b-list-group-item>

Затем добавим массив items в экземпляр Vue:

new Vue({
  el: '#app',
  data: {
 items: [
 { message: 'Nokia 8' },
 { message: 'OnePlus 5T' },
 { message: 'Samsung Galaxy S9' }
 ]
  }
})

И вот информация о наших смартфонах, отображаемая в компоненте списка Bootstrap-Vue:

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

Поэкспериментируйте с онлайн демо-версией.

Попробуйте сделать этот список еще более динамическим, добавив вызов Ajax для загрузки контента из API или из RSS.

Прослушивание событий в бейджах Bootstrap

Bootstrap содержит компонент бейдж, который полезен для хранения ряда элементов или их маркировки. Например, в приведенном выше примере списка мы могли бы добавить в элемент списка iPhone бейдж, указывающий количество вариантов (5 версий iPhone). С помощью Bootstrap-Vue мы можем использовать компонент <b-badge> в качестве дочернего элемента <b-list-group-item>, чтобы указать количество различных типов iPhone следующим образом:

<b-list-group-item href="http://apple.com">iPhone <b-badge>5</b-badge></b-list-group-item>

В результате список должен выглядеть следующим образом:

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

Теперь давайте добавим на нашу страницу кнопку, чтобы отслеживать количество поделившихся ссылкой. Для этого мы можем использовать компонент <b-button> для создания кнопки Bootstrap, и внутри кнопки мы введем дочерний элемент <b-badge>:

<div class="text-center">
  <b-button variant="primary" size="sm">
 Share on Twitter <b-badge variant="light">{{ share_count }}</b-badge>
  </b-button>
</div>

Мы изменяем код JavaScript, добавляя переменную share_count, которая будет отслеживать количество раз, когда кто-то поделился ссылкой на страницу:

new Vue({
  el: '#app',
  data: {
 share_count:0
  } 
})

Это должно дать нам следующий результат:

Интеграция Bootstrap с Vue.js с помощью Bootstrap-Vue

Обратите внимание: кнопка все еще не динамическая, то есть она не будет увеличивать счетчик, когда мы нажимаем кнопку «Поделиться в Twitter», так как мы еще не добавили для кнопки прослушивание событий. Мы будем использовать директиву Vue.js v-on для прослушивания события нажатия кнопки:

<b-button variant="primary" size="sm" v-on:click="share_count += 1">

Этот код увеличивает на 1 значение переменной share_count всякий раз, когда мы нажимаем кнопку, код для бейджа менять не нужно, так как он уже привязан к переменной share_count. Поэтому, всякий раз, когда нажимается кнопка, значение переменной share_count увеличивается, а также изменяется и бейдж. В этом преимущество привязки данных Vue.js!

Заключение

В этом руководстве мы рассмотрели, как использовать Bootstrap-Vue для добавления компонентов, подобных Bootstrap, в приложения Vue.js. Теперь дело за вами: создайте следующую потрясающую веб-страницу Bootstrap-Vue и поделитесь ею с миром!

Автор: Zeeshan Chawdhary

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree