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

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

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

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

Введение в Bootstrap

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

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

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

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

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

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

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

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

Bootstrap-Vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот код увеличивает на 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree