Популярные плагины и пакеты Vue.js

Vue.js — это современная библиотека JavaScript, а также фреймворк. На самом деле это библиотека пользовательского интерфейса, которую можно использовать с любыми другими JS-библиотеками, фреймворками или решениями. Тем не менее, он поставляется с динамичной экосистемой плагинов и пакетов, которые легко масштабируются, чтобы стать полноценным современным интерфейсом JS.

Библиотека JavaScript вместе с фреймворком, таким как Vue.js и react, дополнены здоровой экосистемой плагинов и пакетов, которые делают разработку надежной, быстрой и легкой. Поскольку и React, и Vue.js исключительно популярны в международном сообществе разработчиков, существует постоянно растущее хранилище плагинов и пакетов, которые вы можете использовать в своих проектах. В этой статье представлены некоторые из самых популярных плагинов Vue.js для Vue 2 и Vue 3.

Хотите быстро создать приложение? Вам не нужно изобретать велосипед. Этот список должен помочь вам выполнить большую часть тяжелой работы с помощью некоторых хорошо спроектированных и протестированных проектов, которые уже созданы и открыты сообществом.

Vuetify
NuxtJS
Vuex
Постоянное состояние Vuex
ВьюПресс
Vue Мета
Vue ChartJS
Макет сетки Vue
Vue с возможностью перетаскивания
Vee-проверка
Тостификация Vue
Вью-тур
Swiper.js
Проспект Vue2
TroisJS
Vue Scrollama
Считыватель QR-кода Vue

Если вы хотите освоить Vue.js, возможно, вы захотите пройти один из моих курсов по udemy, на которые предоставляются отличные скидки, пожизненный доступ и сертификат об окончании udemy. https://www.udemy.com/user/coding-simplified/

Vuetify

Вы когда-нибудь пытались сделать приложение визуально привлекательным? Vuetify — это библиотека пользовательского интерфейса, основанная на Material Design, которая поддерживает большую часть языка дизайна Google и Android. Это библиотека с открытым исходным кодом с сотнями компонентов, таких как кнопки, панели приложений, чипы, модальные окна и многое другое. Эти компоненты предварительно оформлены, очень функциональны из коробки и позволяют вам взаимодействовать с ними через хорошо задокументированные реквизиты и слоты. Предопределенные классы CSS также можно использовать для управления цветом, шрифтом, шагом сетки, flexbox и многим другим.

Vuetify отлично подходит как для начинающих, так и для опытных пользователей, потому что компоненты можно использовать как есть или стилизовать по своему вкусу. Он совместим с Vue 2, а версия Vue 3 в настоящее время находится в альфа-версии. Представьте себе создание высококачественного интерфейса приложения с самого начала проекта без необходимости создавать собственные компоненты с нуля.

NuxtJS

NuxtJS — это расширение Vue, которое упрощает настройку проекта Vue. Nuxt делает это, устраняя необходимость в шаблонном коде, объединяя часто используемые пакеты с самого начала и обеспечивая хорошую организацию кода с помощью предопределенной структуры папок. В целом, он предлагает отличные возможности для разработчиков и сокращает время кодирования.

Ключевые функции:

Включает отрисовку на стороне сервера (SSR) для лучшей поисковой оптимизации (SEO). Контент обрабатывается в серверной среде для улучшения индексации сайта поисковыми ботами.
Включает генерацию статических сайтов (SSG) для сайтов, содержание которых не меняется быстро, например блогов. Опять же, еще один очень полезный инструмент для SEO, потому что он предварительно преобразует контент в HTML, который можно сразу проиндексировать.
Также работает как одностраничное приложение (SPA) и может быть легко преобразовано в прогрессивное веб-приложение (PWA).
Vuex встроен
Vue-маршрутизатор не является обязательным. Страницы автоматически создаются через структуру папок.

NuxtJS в настоящее время основан на Vue 2. Но недавно был анонсирован Nuxt 3, который был полностью переписан для поддержки Vue 3.

Вьюекс

Вы, наверное, уже слышали о Vuex, официальном шаблоне/библиотеке управления состоянием Vue, которая служит централизованным хранилищем данных для доступа всех компонентов. Обычно данные передаются от компонента к компоненту через пропсы. В больших приложениях это становится неразрешимым, поскольку многим компонентам может потребоваться совместное использование одних и тех же данных, таких как данные профиля пользователя. Vuex решает эту проблему, сохраняя информацию и предоставляя стандартные хуки, которые позволяют компонентам получать доступ к данным.

Библиотека также защищает состояние, применяя мутации, которые позволяют вносить изменения только предсказуемым образом. Состояние вашего приложения также можно разделить на модули для упрощения организации.

Сохраняющееся состояние Vuex

Потенциальная проблема с использованием Vuex заключается в том, что состояние удаляется при обновлении браузера. В некоторых приложениях важно иметь возможность поддерживать состояние Vuex, чтобы уменьшить количество запросов к API или сохранить информацию о пользователе, например профиль пользователя.

VuePress

VuePress также создан создателем Vue.js Эваном Ю. Это генератор статических сайтов, на котором работают многие популярные сайты документации пакетов. VuePress поставляется с темой по умолчанию, которая имеет полноценные функции для создания веб-сайта с документацией.

Ключевая функциональность:

Автоматическое дерево навигации в левой части страницы
Встроенная функция поиска
Работает прямо из коробки
Участники могут редактировать контент на Github, поскольку контент написан в формате Markdown и хранится в том же репозитории.
Подсветка синтаксиса

Вью Мета

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

Vue ChartJS

Хотите добавить диаграммы в свое приложение Vue? Проверьте Chart.js. Это простая, но гибкая библиотека диаграмм javascript для дизайнеров и разработчиков. Он поставляется с множеством красивых типов диаграмм на выбор. Библиотека обеспечивает гибкость настройки компонентов диаграммы, а также внешнего вида.

Макет сетки Vue

Vue Grid Layout предоставляет простую в использовании систему компоновки, которая может обеспечить уровень интерактивности для ваших пользователей. Сетки могут служить контейнерами для вставки любого содержимого, такого как диаграммы, изображения и текст. Это было бы полезно для создания интерактивных информационных панелей, позволяющих пользователю перемещать диаграммы.

Ключевая особенность:

Основные функции, такие как перетаскивание, изменение размера, статический
Виджеты можно добавлять или удалять без перестройки сетки
Отзывчивый
Мин/макс вес/ч на товар
Макеты могут быть сериализованы и восстановлены.

Vue перетаскиваемый

Vue Draggable основан на популярной библиотеке Sortable.js. Это позволяет создавать перетаскиваемые списки. Это было бы полезно для таких приложений, как списки дел или доски канбан, которые позволяют пользователю перемещать элементы на экране.

Ключевая особенность:

Поддерживает сенсорные устройства
Поддерживает ручки перетаскивания и выбираемый текст.
Умное автоматическое масштабирование
Поддержка перетаскивания между разными списками
Нет зависимости от jQuery

Vee-подтвердить

Чтобы убедиться, что вы собираете правильные данные от своих пользователей через формы, проверка ваших форм необходима, чтобы гарантировать, что вводимые пользователем данные соответствуют ожидаемой схеме. VeeValidate — это пакет, который может добавить этот уровень функциональности к любому компоненту формы.

Ключевая особенность:

Декларативное подтверждение
Работает с нативными элементами HTML или любой библиотекой пользовательского интерфейса.
Интуитивный API
Работает как для Vue 2, так и для Vue 3.

Vue тостификация

Тосты — отличный способ отображать оповещения для пользователя. Библиотека Vue Toastification обеспечивает гибкость для размещения всплывающего уведомления в определенных местах на краю экрана и настройки стиля и содержания всплывающего уведомления.

Вью Тур

Vue Tour — это простой способ добавить экскурсию для ваших новых пользователей, помогая им быстро освоить навигацию и максимально эффективно использовать ваше приложение.

Ключевая особенность:

Легкий
Просто добавьте набор шагов и компонент v-tour, и все готово.
Добавляйте собственные анимации и используйте собственные классы.

Swiper.js

Swiper.js — это встроенный карусельный компонент, который можно использовать для пролистывания различных изображений. Библиотека поставляется с большим разнообразием считывателей для изучения. Swiper.js изначально поддерживает Vue 3, предоставляя компонент для подключения к вашему проекту. Для Vue 2 вы можете использовать другие пакеты, такие как vue-awesome-swiper.

vue2-буклет

LeafletJS — популярная библиотека с открытым исходным кодом для мобильных интерактивных карт. Он очень легкий (39 КБ) и обладает всеми картографическими функциями, которые могут понадобиться большинству разработчиков. Этот пакет Vue 2 обеспечивает простую интеграцию в ваше существующее приложение с доступом ко всем функциям Leaflet.

Ключевая особенность:

Общие функции взаимодействия: масштабирование, перетаскивание, панорамирование, перетаскивание маркера, сведение пальцев для масштабирования. > на мобильном
Пользовательские слои плитки
Аппаратное ускорение на мобильных устройствах
Маркеры, всплывающие окна
Наложения изображений
Поддержка GeoJSON

TroisJS

Trois (по-французски Three) — это библиотека Vue 3 для Three.JS, которая является популярной библиотекой WebGL. Three.JS имеет хорошую поддержку как для настольных компьютеров, так и для мобильных устройств. Эта библиотека позволяет легко создавать 3D-контент для вашего веб-сайта с помощью компонентов VueJS. Вы можете использовать эту библиотеку, чтобы добавить средство 3D-рендеринга на свой сайт и указать детали сцены, такие как материалы, освещение, сетки, тени и многое другое, в разделе <template> вашего файла VueJs, используя предварительно созданные компоненты. Trois.Js — это надстройка над Three.js, поэтому она не медленнее исходной библиотеки. Это также упрощает удаление объектов, автоматически удаляя геометрию, материалы, текстуры, средства визуализации и многое другое, чего нет в исходной библиотеке.

vue-scrollama

Добавьте особый штрих прокрутки на свой сайт с помощью этого плагина Vue. Простой и легкий, он позволит вам рассказать свою историю уникальным способом с помощью прокрутки.

Считыватель QR-кода Vue

QR-коды широко распространены в современном мире. Vue QR Code Reader — это пакет plug-and-play, который позволяет вам добавлять функции сканирования QR-кода в ваше приложение.

Ключевая особенность:

Потоковая передача с камеры и непрерывное сканирование QR-кодов.
Перетащите изображения QR-кодов для декодирования.
Массовое сканирование изображений для QR-кодов

Заключение

Хотя этот список не был исчерпывающим, он дает вам представление о разнообразии пакетов, доступных вам в большей экосистеме Vue. Часто нам не нужно изобретать велосипед благодаря вкладу членов сообщества Vue. Я надеюсь, что эти плагины и пакеты помогут ускорить время разработки, чтобы вы могли сосредоточиться на творчестве и сохранении продуктивности.