Vue JS — это прогрессивная среда JavaScript, которая используется для разработки одностраничных приложений (SPA) и пользовательских интерфейсов. И это один из наиболее широко используемых интерфейсных фреймворков.
Одной из интересных особенностей Vue является его способность разбивать веб-страницу на различные компоненты. И этот процесс становится проще с использованием библиотек компонентов пользовательского интерфейса.
Существуют различные библиотеки компонентов пользовательского интерфейса, которые помогут вам легко и быстро создавать компоненты. Итак, в этом блоге мы рассмотрим 10 лучших библиотек компонентов пользовательского интерфейса Vue на 2021 год.
1. ПраймВью
PrimeVue — это простая в использовании, универсальная и производительная библиотека компонентов пользовательского интерфейса Vue, которая помогает создавать потрясающие пользовательские интерфейсы.
Он имеет более 80+ компонентов пользовательского интерфейса с полной поддержкой рекомендаций по обеспечению доступности веб-контента (WCAG) и адаптивным дизайном. А благодаря недавнему обновлению библиотека теперь имеет полную поддержку Vue 3. В ней также появилось еще несколько компонентов.
Одна из лучших особенностей Primevue — это широкий спектр компонентов. Они варьируются от таблиц и пагинаторов до хорошо продуманных организационных диаграмм на основе графов, которые вы можете использовать для создания интерактивных приложений Vue. Он имеет открытый исходный код, имеет более 1 тыс. звезд на Github и 6,983 загрузки в неделю на NPM.
2. Вуэтифай
Vuetify — это библиотека Vue UI с прекрасно созданными вручную компонентами, использующими спецификацию Material Design. Это означает, что он был разработан в точном соответствии со спецификациями Material Design, при этом каждый компонент тщательно проработан, чтобы быть модульным, отзывчивым и производительным.
Vuetify позволяет настраивать ваши приложения с помощью уникальных и динамических макетов и совершенствовать стили ваших компонентов с помощью переменных SASS.
Он также поддерживает рекомендации по доступности, все современные браузеры и совместим с Vue CLI-3. Его легко интегрировать, и он имеет множество многократно используемых компонентов пользовательского интерфейса, таких как карусели, навигация и карточки. Vuetify имеет открытый исходный код и имеет более 29 тысяч звезд на Github и 319,170 XNUMX загрузок в неделю на NPM.
3. Чакра пользовательского интерфейса Vue
Chakra UI — это простая модульная и доступная библиотека компонентов, которая предоставляет вам инструменты для быстрого и легкого создания приложений Vue.
Все компоненты доступны (строго соответствуют стандартам WAI-ARIA), имеют возможность оформления тем и компоновки. Он поддерживает адаптивные стили «из коробки» и совместим с темным режимом.
Пользовательский интерфейс Chakra также содержит набор компонентов макета, таких как CBox и CStack, которые упрощают стилизацию ваших компонентов путем передачи реквизитов. Он также позволяет автоматически импортировать компоненты Chakra UI Vue с помощью плагина веб-пакета. Он имеет открытый исходный код, имеет более 900 звезд на Github и 331 загрузку в неделю на NPM.
4. Бутстрап Vue
BootstrapVue. С помощью BootstrapVue вы можете создавать в Интернете адаптивные, ориентированные на мобильные устройства и доступные ARIA проекты, используя Vue.js и популярную интерфейсную библиотеку CSS — Bootstrap. Документация проста для понимания и ее также легко настроить. Это ускоряет реализацию внешнего интерфейса.
Он предлагает более 85 компонентов, более 45 доступных плагинов, несколько директив и более 1000 значков. Он также предоставляет функциональные компоненты, адаптированные для макетов и адаптивного дизайна. вы также можете легко интегрировать BootstrapVue в свои проекты Nuxt.js с помощью модуля Nuxt.js.
Он также используется так же, как и фреймворк CSS начальной загрузки. Его исходный код доступен на Github с открытым исходным кодом, имеет около 12.9 тыс. звезд и 1.7 тыс. форков.
5. Вуэсакс
Vuesax — это новая платформа компонентов пользовательского интерфейса, созданная с помощью Vuejs для простого создания проектов с уникальным и приятным стилем. vuesax создан с нуля и предназначен для всех типов разработчиков, от любителей внешнего интерфейса до разработчиков серверной части, которые хотят легко создавать свой визуальный подход к конечный пользователь. Дизайн каждого компонента уникален и не привязан к каким-либо визуальным тенденциям или правилам дизайна, что делает проекты, созданные с его использованием, также уникальными.
он предлагает адаптивные страницы и повторно используемые и настраиваемые компоненты пользовательского интерфейса. Также легко начать работу с помощью npm или CDN. В настоящее время он не поддерживает Vue CLI 3 в его последней версии. Он находится в открытом доступе на Github, имеет около 4.9 тысяч звезд и 6700 загрузок в неделю (NPM).
6. Ant Design Vue
Ant Design vue, основанная на спецификации Ant Design, Ant design vue — это библиотека пользовательского интерфейса vue, содержащая набор высококачественных компонентов и демонстрационных версий для создания насыщенных интерактивных пользовательских интерфейсов.
Ant-design-vue предоставляет множество компонентов пользовательского интерфейса для обогащения ваших веб-приложений, таких как скелет, ящик, статистика и многое другое.
В недавнем выпуске ant Design vue версии 2 он был обновлен, чтобы обеспечить более быструю и простую интеграцию, меньший размер пакета, а также поддерживать Vue 3, документ New Composition API. Он также поддерживает современные веб-браузеры, серверный рендеринг и электронную обработку. Он имеет более 13 тысяч звезд на Github и 39,693 XNUMX загрузок в неделю по NPM.
7. Квазар
Quasar — одна из лучших инфраструктур пользовательского интерфейса Vue, которая позволяет разработчикам использовать одну базу исходного кода для всех платформ через Quasar CLI с лучшими готовыми практиками. Это позволяет разработчикам сосредоточиться на содержимом своего приложения, а не на всех других элементарных вещах (системе сборки, макете), связанных с ним. он ориентирован на соблюдение рекомендаций Material 2.0, а также имеет очень поддерживающее сообщество.
Одной из особенностей Quasar является возможность один раз написать код и одновременно развернуть его в качестве веб-сайта или мобильного приложения, используя всего одну базу кода. В настоящее время находится в стадии бета-тестирования новая версия, которая будет поддерживать функции vue 3. На Github у него около 17.8 тысяч звезд.
8. Буэфи
Buefy — это легкая библиотека компонентов пользовательского интерфейса для Vue JS, основанная на Bulma (фреймворк CSS). Buefy сочетает Bulma с Vue, помогая создавать красивые приложения с использованием минимального количества кода. это уровень JavaScript для вашего интерфейса Bulma.
Его можно импортировать полностью или по отдельности на обычную веб-страницу. Интегрировать его в ваш проект довольно просто: это можно сделать с помощью npm или CDN.
Buefy предоставляет готовые компоненты пользовательского интерфейса, макет и значки. Компоненты могут использовать SASS в вашей теме. Он также поддерживает современные браузеры.
9. Вью-материал
Vue Material — это широко используемый легкий фреймворк, реализующий спецификации Material Design. Это одна из лучших интеграций Vue.js и спецификаций Material Design! Вы можете легко настроить его в соответствии со всеми вашими потребностями с помощью простого API.
Он совместим с адаптивным дизайном и поддерживает все современные веб-браузеры. Библиотека разделена на темы, компоненты и элементы пользовательского интерфейса. Темы дают подробное руководство о том, как оформить ваше приложение (или написать свои собственные темы), а компоненты и элементы пользовательского интерфейса состоят из макетов, навигации, типографики, значков и еще 30 компонентов. У него около 9.2 тыс. звезд и 1.1 тыс. форков на Github, а также более 21 тыс. еженедельных загрузок в NPM.
10. КинUI
KeenUI — это легкая библиотека пользовательского интерфейса vue.js с простым API, вдохновленная Material Design от Google. Keen UI не является фреймворком CSS. Поэтому он не включает стили для системы сеток, типографики и т. д. Вместо этого основное внимание уделяется интерактивным компонентам, требующим Javascript.
Он имеет около 30 многоразовых компонентов. Компоненты можно настраивать путем переопределения стилей с помощью переменных SASS. вы можете интегрировать его в свой проект с помощью CDN или npm. Он имеет открытый исходный код и имеет около 4 тысяч звезд на Github.
Заключение
Библиотеки компонентов пользовательского интерфейса определенно значительно упрощают создание проекта. Выбор подходящего варианта зависит от особенностей проекта, над которым вы хотите работать. Прежде чем погрузиться в новый проект, рекомендуется просмотреть библиотеку компонентов пользовательского интерфейса, которая лучше всего подходит для этой цели.