Всем привет! Сегодня поговорим о том какие существуют Vue библиотеки с готовыми компонентами, которые можно использовать для разработки проектов. UI библиотеки упрощают жизнь и ускоряют время разработки. Кто-то любит использовать готовые библиотеки, а кто-то любит придумывать велосипед, который в последствии может не поехать, в особенности если ты начинающий разработчик и недавно начал оcваивать Vue.js.

В статье разберем 5 vue библиотек с готовыми компонентами. Все библиотеки, которые мы разберем достаточно качественные и их можно использовать для  широкого спектра проектов — от Hello world  до социальной сети.

Vue библиотеки

Ant Design

Ant Design наверняка будет знакома тем, кто занимался разработкой проектов на React.js, так как изначально эта библиотека была написана для React, и теперь она портирована на Vue. На мой взгляд это самая красивая (по крайней мере красивее чем Vuetify) и самая удобная ui библиотека для vue. В моем личном топе она на первом месте. Библиотека насчитывает десятки компонентов, которые очень просты в освоении. Есть свой набор иконок разных стилей. Иконок не очень много, но вы всегда можете подключить Font Awesome. Присутствует своя сетка, аж в 24 колонки — для тех кому мало 12. Отметим, что дизайн система использует LESS в качестве препроцессора css, и здесь так же как и во Vuetify можно переопределить глобальные переменные стилей. Документация на английском языке. К минусам можно отнести большой вес библиотеки после сборки проекта.

BootstrapVue

Старый добрый Bootstrap перебрался на Vue. BootstrapVue основан на стилях Bootstrap4 + из него убрали jQuery, переделали и дополнили js компоненты. Документация на английском языке. Дизайн система имеет на борту более чем 85 переиспользуемых компонентов, 45 плагинов, несколько директив и 1100+ иконок. К сожалению локализаций у библиотеки нет. Так же из минусов можно отметить отсутствие полноценной валидации форм поэтому её придется заменять сторонними плагинами. Плюс библиотеки в том что она достаточно легковесная — после сборки проекта файлы весят почти в два раза меньше чем файлы Ant Design.

Vuetify

Vuetify — наверно самая популярная библиотека для быстрого прототипирования. В данный момент на Github эта библиотека насчитывает 28000 звезд. В качестве дизайн системы данная библиотека использует дизайн систему Google Material Design. На борту библиотека имеет около 80 готовых компонентов, в которых поможет разобраться документация. Документация версии 1.5.x частично переведена на русский, начиная с версии 2.3.x документация доступна пока только на английском. Важно отметить, что библиотека имеет локализации включая русский и украинский языки. У Vuetify  есть своя адаптивная сетка на 12 колонок аналогичная Bootstrap. Так же присутствует поддержка SASS стилей + есть возможность переопределить глобальные значения в файле конфигурации webpack. Присутствует три набора иконок: Material Design и две версии Font Awesome — 4 и 5.

Vue UI

Vue UI — функциональная библиотека от китайских разработчиков. Есть документация на английском, но встречаются демонстрации компонентов на китайском языке. Vue UI используют в разработке многие известные компании, такие как Alibaba, Baidu, Lenovo. Библиотека может похвастаться локализациями на русском и украинском языках. Присутствует внушительный набор иконок. Сетка как и в Ant Design на 24 колонки. Из препроцессоров используется LESS. Полноценная валидация форм на месте. Собранные файлы весят меньше чем у Ant Design и Vuetify.

Element UI

По функционалу библиотека Element UI схожа с предыдущей Vue UI. Дизайн система насчитывает порядка 60 компонентов со всевозможными кастомизациями, так как стили библиотеки легко переопределяются. Библиотека использует препроцесcор SCSS с возможностью заменить глобальные переменные цветов, тем самым можно легко создать свою цветовую тему. Кстати говоря, все классы в библиотеке названы по БЭМу. Присутствует поддержка 24 колоночной структуры и локализации на русском, украинском и казахском языках. Есть достаточно скудный набор иконок, который скорее всего придется заменить на тот, который придется вам по душе. Как и в любой уважающей себя UI библиотеке имеется полноценная валидация форм, так что сторонние плагины типа VeeValidate не потребуются. Документация на английском языке с понятными примерами.

Заключение

Таким образом, мы с вами кратко разобрали пожалуй самые популярныe vue библиотеки готовых компонентов. Выбирайте дизайн систему, которая вам больше всего понравилась и вперед кодить!