Компоненты пользовательского интерфейса Vue: 15 библиотек и наборов

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

Этот обзор является частью серии, которую я делал для различных фреймворков. В частности, моя коллекция библиотек компонентов Tailwind CSS, а также мой обзор самых эффективных библиотек пользовательского интерфейса React. Подход к Vue будет точно таким же.

Мы сосредоточимся на библиотеках, которые находятся в активной разработке, но также поддерживают новую версию Vue 3*. Заранее могу сказать, что многие библиотеки не попали в список просто потому, что последний раз они обновлялись несколько лет назад. Нет смысла работать с библиотекой с недостаточной поддержкой для фреймворка, который развивается ежедневно.

* Есть несколько исключений из этого правила. Некоторые библиотеки не планируют обновляться до Vue 3, но все еще находятся в активной разработке. И у некоторых есть планы по обновлению в будущем, но с точки зрения обслуживания это довольно сложная работа.

Квазар

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

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

Это помогает избежать раздувания вашего проекта неиспользуемым кодом. И, наконец, весь код, написанный в Quasar, используется как единая кодовая база. Итак, если вы создаете одностраничное приложение, вы также можете легко экспортировать его как мобильное приложение.

Арко Дизайн

Arco — это система проектирования корпоративного уровня, популярная среди разработчиков React.js. Однако у Arco Design также есть версия Vue.js. И, в отличие от личных библиотек пользовательского интерфейса, созданных независимыми разработчиками, Arco содержит функции и файлы дизайна.

К ним относятся файлы Figma и Sketch для каждого компонента. Библиотека пользовательских значков и коллекция из более чем 60 пользовательских компонентов, доступных для мгновенной загрузки.

Со всеми этими ресурсами вы можете собрать макет дизайна за считанные минуты.

Vuetify

Все любят материальный дизайн, верно? Библиотека пользовательского интерфейса Vuetify загружена пользовательскими компонентами на основе спецификации Material Design. Это также одна из библиотек старой школы, которая была с Vue.js с самого начала. Это лучше всего отражается в том, что может предложить библиотека, а также в том, как она сравнивается с другими библиотеками.

Основываясь только на этой сравнительной таблице, мы видим, что Vuetify действительно работает над тем, чтобы разработчики имели в своем распоряжении все лучшие инструменты. Также могу сказать, что система шаблонов довольно проста в освоении. Так же, как если бы вы изучали служебные классы Tailwind CSS.

Vue Bootstrap

 Единственное, что следует отметить в этой библиотеке, это то, что она немного медлительна с обновлениями. Как объясняется в этом выпуске GitHub, они ищут новых сопровождающих, которые помогут обновить библиотеку до Bootstrap 5 с поддержкой Vue 3. И я думаю, что в свое время они будут, поэтому я все равно включу это, несмотря на то, что я сказал в начале статьи.

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

Благодаря модульной поддержке вы можете использовать только то, что вам нужно, и пропустить остальное.

Буффи

Бульма не получает столько любви, сколько должна. Это один из тех фреймворков CSS, которым каким-то образом удалось остаться в стороне от всех трендов и сумасшествия внешнего интерфейса. Но, тем не менее, это очень хороший фреймворк для работы, и теперь вы можете использовать Bulma вместе с Vue через библиотеку Buefy. С ним легко работать, и он подчеркивает легкую структуру.

Если вы уже работали с Bulma раньше, Buefy сохраняет все изящные компоненты пользовательского интерфейса Bulma. Кроме того, вы получаете готовый образец кода для каждого варианта компонента. Документация также включает ссылки на CodePen, так что вы можете поиграться с примерами, не запуская библиотеку самостоятельно.

 Обратите внимание, что Buefy — это строго библиотека Vue 2, и она не планирует обновляться до Vue 3, потому что это требует слишком много работы. Альтернативой является использование Oruga (также включенного в этот обзор), для которого доступна директива Bulma.

Милость

Grace — это специально разработанная система дизайна. Он реализован с использованием TypeScript, SASS, Jest и Rollup для комплектации. Проект находится в стадии разработки и требует надлежащего обновления документации. Хотя, похоже, так оно и будет, поскольку сопровождающие уже начали открывать GitHub Issues для этого конкретного случая.

Вуэтенсилс

Если вы предпочитаете использовать библиотеки компонентов в качестве отправной точки, имея при этом свободу стилизовать все самостоятельно, Vuetensils — это фреймворк, созданный специально для этой цели.

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

Наивный интерфейс

Naive UI — это библиотека компонентов Vue 3 со встроенной оптимизацией производительности. Он создан для разработчиков, которые уже используют TypeScript. Компоненты имеют четкую структуру и охватывают практически все мыслимые сценарии.

С добавлением готовых компонентов макета — Naive UI — хороший кандидат для использования в новых проектах веб-сайтов. Вы также можете определить пользовательские конфигурации, используя либо глобальную тему, либо пошаговое создание собственной конфигурации.

Вэстический пользовательский интерфейс

Vuestic — это стильная платформа пользовательского интерфейса Vue 3, которая содержит более 50 адаптивных компонентов, интегрированные специальные возможности и поддержку во всех основных браузерах: веб-браузерах и мобильных устройствах. Вы также получаете доступ к специально созданному шаблону панели администратора, что позволяет запускать проекты, созданные как продукты SaaS.

Дизайн компонентов выглядит довольно скудным и не навязывает строгих характеристик. Таким образом, Vuestic UI должен работать в проектах всех сторон спектра.

Пользовательский интерфейс Варлет

Varlet — первая (из двух) UI-библиотека в этом списке, созданная как комплект для мобильных устройств.

Он интегрирован с Material Design и охватывает широкий спектр компонентов, используемых при разработке мобильных приложений. Varlet имеет постоянную поддержку рендеринга на стороне сервера.

Вы можете поиграть с компонентами из документации. Однако рекомендуемый способ опробовать их — использовать VS Code или WebStorm, для которых авторы предоставили собственное решение для подсветки синтаксиса.

 Создатель Vue (Эван Ю) имеет китайское происхождение и имеет прямое отношение к тому факту, что многие люди из таких стран, как Китай, Япония и Корея, предпочитают работать с Vue, а не с другими фреймворками. Это также означает, что сообщество Vue гораздо более активно в восточных странах, чем в таких местах, как США, где React считается фреймворком номер один.

Оруга

Oruga — это независимая от фреймворка библиотека компонентов пользовательского интерфейса Vue. Идея состоит в том, что вы либо используете предоставленные компоненты и стилизуете их самостоятельно, либо используете внешнюю структуру (например, Bulma) для построения поверх существующих компонентов.

Одна интересная особенность Orgua заключается в том, что компоненты — это не просто интерфейсы. Но многие из них также имеют дополнительные функции. В документации вы найдете все необходимые определения Props, а также имена отдельных переменных как в CSS, так и в SASS.

Волновой интерфейс

Пользовательский интерфейс Wave построен на идее, что компоненты должны быть настраиваемы с помощью CSS. Таким образом, даже если у компонента есть пользовательский стиль, вы можете переопределить пользовательские параметры с помощью CSS без необходимости принудительно устанавливать конкретное свойство.

Стиль дизайна довольно скромный, хотя для некоторых он может показаться минималистичным.

Пользовательский интерфейс Wave поставляется со своим собственным определением макета. Это доступно как Spaces, а также Flexbox и Grid. Вспомогательные классы довольно просты в использовании, поэтому создание сложных структур не будет проблемой.

Пользовательский интерфейс чакры Vue

Пользовательский интерфейс Chakra, вероятно, наиболее известен как одна из популярных библиотек для React. Но у него есть версия Vue. Итак, если вы новичок в Chakra или использовали его в прошлом, использование версии Vue будет точно таким же.

Библиотека наиболее известна своим строгим подходом к доступной веб-разработке. Это достигается за счет обеспечения совместимости каждого компонента с рекомендациями WAI-ARIA.

Но область, в которой Chakra выделяется больше всего, — это способность составлять компоненты. Другими словами, вы можете повторно использовать элементы компонентов, чтобы смешивать их вместе. Это позволяет вам достичь структуры и стиля компонентов, которые в противном случае были бы невозможны.

Муравей Дизайн Вью

Ant Design — одна из ведущих систем дизайна для современной веб-разработки. Мы уже рассказывали об их предложениях в предыдущей статье о библиотеках React.

Но, подытоживая, Ant Design фокусируется на реализации философии дизайна, а не на наборе компонентов, которые вы просто подключаете к случайному проекту. Таким образом, эту библиотеку вы захотите использовать при работе над профессиональным (корпоративным) проектом.

Все, от руководств до философии компонентов, подробно объяснено в их документах.

Вант

Vant — вторая (и последняя!) библиотека компонентов, созданная для мобильной разработки. С 20 000 звезд на GitHub — можете не сомневаться, это настоящий зверь в этом плане.

Компоненты спроектированы так, чтобы быть как можно более легкими, при этом средний размер компонента составляет всего 1 КБ, когда все сказано и сделано. Вант использует TypeScript, а также имеет некоторые ресурсы дизайна, доступные для экспорта в Sketch или Axure.

Активы Sketch также можно импортировать в Figma.

Если вы занимаетесь мобильной разработкой и работаете с Vue — вероятно, Vant — одна из лучших библиотек. Документация обширна, а возможность настраивать структуру компонентов означает, что он хорошо подходит как для проектов SPA, так и для проектов PWA.

Запуск нового проекта с библиотекой компонентов

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

Если вы раньше занимались веб-разработкой (используя современный стек), начать работу с Vue.js довольно просто. Это также одно из главных преимуществ использования фреймворка. Вам также не нужно изучать TypeScript, хотя Vue вполне с ним работает.