От автора: в этой статье мы рассмотрим, как интегрировать Bootstrap Vue js с помощью Bootstrap-Vue. React и Vue.js — две ведущие современные JavaScript-системы для разработки интерфейса. В то время, как React имеет крутую кривую обучения, сложный процесс сборки (если вы выходите из мира jQuery), все, что вам нужно сделать, чтобы начать использовать Vue.js — это просто импортировать скрипт.
<script src="https://unpkg.com/[email protected]/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 с помощью следующей команды:
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 с помощью тега 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/[email protected]/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/[email protected]/dist/css/bootstrap.min.css https://unpkg.com/[email protected]/dist/bootstrap-vue.css
На вкладке Javascript давайте импортируем библиотеки Vue и Bootstrap Vue:
https://unpkg.com/[email protected]/dist/vue.min.js https://unpkg.com/[email protected]/dist/bootstrap-vue.js
После этого нажмите кнопку Save & Close. Теперь мы готовы начать работать с компонентами Bootstrap-Vue.
Создание компонента оповещения Bootstrap-Vue
Чтобы создать компонент оповещения Bootstrap-Vue, мы добавим следующее в раздел CodePen HTML:
<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. Затем мы изменим некоторые параметры этого блока оповещения, чтобы сделать его более интересным. Например, чтобы сделать блок оповещения скрываемым, добавим ключевое слово 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' })
}
И вот наш простой список:
Однако это далеко не динамический список. Давайте добавим внутри разметки компонента списка директиву 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:
Поэкспериментируйте с онлайн демо-версией.
Попробуйте сделать этот список еще более динамическим, добавив вызов 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>
В результате список должен выглядеть следующим образом:
Теперь давайте добавим на нашу страницу кнопку, чтобы отслеживать количество поделившихся ссылкой. Для этого мы можем использовать компонент <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 } })
Это должно дать нам следующий результат:
Обратите внимание: кнопка все еще не динамическая, то есть она не будет увеличивать счетчик, когда мы нажимаем кнопку «Поделиться в 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.