От автора: в этой статье мы рассмотрим, как интегрировать Bootstrap Vue js с помощью Bootstrap-Vue. React и Vue.js — две ведущие современные JavaScript-системы для разработки интерфейса. В то время, как React имеет крутую кривую обучения, сложный процесс сборки (если вы выходите из мира jQuery), все, что вам нужно сделать, чтобы начать использовать Vue.js — это просто импортировать скрипт.
|
1 |
<script src="//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.
Мы рассмотрим первый из них, Bootstrap-Vue, так как это самый популярный проект.
Bootstrap-Vue
Bootstrap-Vue поддерживает не только компоненты Bootstrap и систему сеток, но также включает поддержку Vue.js Directives, что дает нам полный набор функций из экосистемы Vue.js.
Одной из замечательных особенностей Bootstrap-Vue является то, что у него есть онлайн Playground. Эта площадка является перезагружаемой, а также позволяет экспортировать код в JSFiddle. Разве это не круто!
Я считаю, что для успеха любого программного проекта необходима хорошая документация и экосистема разработчиков, и у Bootstrap-Vue все в порядке по обоим пунктам.
Начало работы с Bootstrap-Vue с использованием командной строки
Если вы следуете современным тенденциям в области веб-разработки, вы наверняка знаете о npm и установке библиотек с его помощью. Bootstrap-Vue можно установить через npm с помощью следующей команды:
|
1 |
npm i bootstrap-vue |
Bootstrap-Vue также предоставляет два шаблона vue-cli, которые могут использоваться для разработки:
Webpack Simple: быстрое решение для небольшого приложения.
Webpack: для проектов с широким функционалом.
Сначала мы устанавливаем vue-cli:
|
1 |
npm i -g vue-cli |
Затем мы инициализируем проект — давайте назовем его getting-started — используя простой веб-пакет, введя в терминале следующее:
|
1 2 3 4 5 |
$ 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 приложение компилируется и запускается в браузере.
Теперь ваша локальная среда должна содержать следующие файлы и папки:
|
1 2 3 4 5 6 7 8 9 10 |
├── 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 с помощью тега script в разделе head
Мы рассмотрели способ установки и работы с Bootstrap-Vue через npm, давайте также рассмотрим более простой вариант: включение Bootstrap-Vue, используя тег script в разделе head HTML-документа:
|
1 2 3 4 5 6 7 8 9 |
<!-- 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="//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:
|
1 2 |
//unpkg.com/bootstrap@4.0.0/dist/css/bootstrap.min.css //unpkg.com/bootstrap-vue@2.0.0-rc.1/dist/bootstrap-vue.css |
На вкладке Javascript давайте импортируем библиотеки Vue и Bootstrap Vue:
|
1 2 |
//unpkg.com/vue@2.5.13/dist/vue.min.js //unpkg.com/bootstrap-vue@2.0.0-rc.1/dist/bootstrap-vue.js |
После этого нажмите кнопку Save & Close. Теперь мы готовы начать работать с компонентами Bootstrap-Vue.
Создание компонента оповещения Bootstrap-Vue
Чтобы создать компонент оповещения Bootstrap-Vue, мы добавим следующее в раздел CodePen HTML:
|
1 2 3 |
<div id='app'> <b-alert show> Hello {{ name }}! </b-alert> </div> |
Затем добавим экземпляр Vue в раздел JS:
|
1 2 3 4 5 6 7 8 |
window.onload = function() { new Vue({ el: '#app', data: { name: 'Sitepoint' }, }) } |
В результате мы увидим оповещение «Hello Sitepoint!» в области просмотра результата:
В приведенном выше коде отображается простой компонент оповещения Bootstrap с использованием Vue.js и Bootstrap-Vue. Затем мы изменим некоторые параметры этого блока оповещения, чтобы сделать его более интересным. Например, чтобы сделать блок оповещения скрываемым, добавим ключевое слово dismissible после директивы show:
|
1 |
<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.
Начнем с создания статического списка определенных смартфонов:
|
1 2 3 4 5 6 7 |
<div id='app'> <b-list-group> <b-list-group-item href="//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:
|
1 2 3 4 5 |
window.onload = function() { new Vue({ el: '#app' }) } |
И вот наш простой список:
Однако это далеко не динамический список. Давайте добавим внутри разметки компонента списка директиву Vue.js v-for, чтобы отобразить несколько элементов списка из массива:
|
1 2 3 |
<b-list-group-item v-for="item in items"> {{ item.message }} </b-list-group-item> |
Затем добавим массив items в экземпляр Vue:
|
1 2 3 4 5 6 7 8 9 10 |
new Vue({ el: '#app', data: { items: [ { message: 'Nokia 8' }, { message: 'OnePlus 5T' }, { message: 'Samsung Galaxy S9' } ] } }) |
И вот информация о наших смартфонах, отображаемая в компоненте списка Bootstrap-Vue:
Поэкспериментируйте с онлайн демо-версией.
Попробуйте сделать этот список еще более динамическим, добавив вызов Ajax для загрузки контента из API или из RSS.
Прослушивание событий в бейджах Bootstrap
Bootstrap содержит компонент бейдж, который полезен для хранения ряда элементов или их маркировки. Например, в приведенном выше примере списка мы могли бы добавить в элемент списка iPhone бейдж, указывающий количество вариантов (5 версий iPhone). С помощью Bootstrap-Vue мы можем использовать компонент <b-badge> в качестве дочернего элемента <b-list-group-item>, чтобы указать количество различных типов iPhone следующим образом:
|
1 |
<b-list-group-item href="//apple.com">iPhone <b-badge>5</b-badge></b-list-group-item> |
В результате список должен выглядеть следующим образом:
Теперь давайте добавим на нашу страницу кнопку, чтобы отслеживать количество поделившихся ссылкой. Для этого мы можем использовать компонент <b-button> для создания кнопки Bootstrap, и внутри кнопки мы введем дочерний элемент <b-badge>:
|
1 2 3 4 5 |
<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, которая будет отслеживать количество раз, когда кто-то поделился ссылкой на страницу:
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data: { share_count:0 } }) |
Это должно дать нам следующий результат:
Обратите внимание: кнопка все еще не динамическая, то есть она не будет увеличивать счетчик, когда мы нажимаем кнопку «Поделиться в Twitter», так как мы еще не добавили для кнопки прослушивание событий. Мы будем использовать директиву Vue.js v-on для прослушивания события нажатия кнопки:
|
1 |
<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
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
