Лучшие рекомендации по структуре пользовательского интерфейса Vue3 на 2021 год

Vue.js UI Kit
Лучшие рекомендации по структуре пользовательского интерфейса Vue3 на 2021 год

[Я впервые участвую в августовском "вызове12День, подробности о событии уточняйте:Испытание августовского обновления

Vue3 уже давно отсутствует, и его версия стабильна и готова к работе. Хотя многие разработчики неоднозначно оценили эту версию, в новой версии отсутствуют соответствующие ресурсы из-за перестройки экосистемы. По сравнению с богатой средой пользовательского интерфейса Vue2, Vue3 немного меньше, и это также одна из причин, по которой разработчики используют Vue3.

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

Ant Design Vue

Официальный сайт:2 маленьких .ant DV.com/components/...

Ant Design Vue — очень зрелая среда, с помощью Ant Design Vue очень просто создать пользовательский интерфейс, компоненты можно адаптировать к различным стилям значков, шрифтам и темным темам. Ant Design Vue постоянно совершенствует свои 60+ компонентов, в основном покрывая большую часть потребностей проекта и делая их лучше и доступнее.

antdv.jpg

Пакет Ant Design на Vue3 меньше, кажется легче и поддерживает SSR (также включает API композиции). Ant Design имеет полноценные сложные компоненты, такие как таблицы данных, поля статистики, всплывающие подтверждения, модальные окна и всплывающие окна.

Ant Design Vue имеет более 15 тысяч звезд на GitHub и 49 тысяч еженедельных загрузок, и данные уже говорят о его популярности.

BalmUI

Официальный сайт:next-material.balmjs.com/#/

BalmUIОни выпустили свою версию 9.0, которая поддерживает Vue3. Бальзам основан на материальном дизайне Google, поэтому он выглядит знакомо. Balm поставляется с плагинами и директивами Vue, а также с широкими возможностями настройки компонентов от простых до сложных.

balmui.jpg

BalmUI развивается очень быстро, если вы хотите использовать стиль Material Design, используйте сложные встроенные директивы (такие какdebouncingА UI Ripple) пригодится при создании пользовательских компонентов, а затем идеально подходит для проектов Vue3.

Wave UI

Официальный сайт:antoniandre.github.io/wave-ui/

WaveUIХорошая позиция после выпуска Vue3,WaveUIРазработка Vue3 началась, когда он был еще в альфа-версии, и цель состоит в том, чтобы поддерживать его, как только его API станет стабильным, что сделает его одним из первых фреймворков пользовательского интерфейса Vue3.

waveui.jpg

WaveUIС более чем 40 красивыми и отзывчивыми компонентами, они варьируются от счетчиков до календарей и всего, что между ними.WaveUIТакже предоставляются утилита, настраиваемость и полнофункциональная интегрированная проверка формы.

WaveUIПредоставленные компоненты красивы и очень хорошо анимированы, а их стиль соответствует всему фреймворку. Хороший выбор для адаптивных приложений Vue3 корпоративного уровня.

Vuestic

Официальный сайт:vuestic.dev/

VuesticЭто одна из самых красивых панелей администратора с открытым исходным кодом для Vue, которая хороша для написания поддерживаемого кода Vue, создания гибких компонентов и интерфейсов.

vuestic.jpg

Команда недавно выпустилаVuesticВерсия Vue3, включающая популярныйVuestic Admin UIи другие компоненты.VuesticПодчеркивая готовую поддержку навигации с помощью клавиатуры, эта функция популярна в сообществе интерфейсных пользователей благодаря удобному пользовательскому интерфейсу.

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

VuesticЗарекомендовал себя как один из самых красивых фреймворков пользовательского интерфейса Vue3 с красивым каталогом компонентов. Теперь они набирают темп для создания более сложных компонентов, таких как средства выбора даты или таблицы данных, и они наверняка будут такими же креативными, как и их текущие предложения.

Element+

Официальный сайт:element-plus.org/#/zh-CN

Element+Уже сделав себе имя на Vue2,Element+Благодаря тому, что в Vue3 добавлено множество ненавязчивых компонентов, большая часть того, что вам нужно для создания очень сложного приложения, уже создана и готова к использованию. Element+Предоставляет полноценный инструмент выбора даты и времени, дерево, временную шкалу и компоненты календаря.

element.jpg

Element+Предоставляет даже мельчайшие виджеты, которые могут понадобиться разработчику при создании пользовательского интерфейса, от простых анимаций до системы интернационализации всей платформы, которую можно интегрировать сi18nИспользуйте в паре, чтобы создавать пользовательские переводы и даже добавлять не встроенные языки.

Element+Принадлежит на GitHub11.1k+Одна звезда становится одной из самых популярных платформ пользовательского интерфейса Vue3 на Github. Она оправдывает ожидания разработчиков благодаря отличному управлению проблемами, своевременным обновлениям, подключаемым компонентам и широким возможностям настройки с помощью переменных SCSS.

Ionic

Официальный сайт:ionic framework.com/docs/v UE/o V…

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

ionic.jpg

Ionic Vue — это зрелая платформа с поразительным сообществом, множеством вопросов StackOverflow, корпоративной поддержкой и большим каналом Slack с основными участниками, что позволяет легко получить поддержку, когда вам нужна помощь.

Фреймворк Ionic Vue имеет более 45 тысяч звезд на Github и используется многими крупными компаниями, включая Airbus и Electronic Arts, а команда Ionic известна тем, что хорошо поддерживает свою инфраструктуру пользовательского интерфейса, которая сейчас является отличным вариантом для будущего.

Naive UI

Официальный сайт:Woohoo.naive UI.com/this-cn/OS-Diva…

Naive UIОпубликованный в Твиттере, а затем ретвитнутый создателями Vue, он привлек много трафика к зарождающейся библиотеке компонентов. Сейчас,Naive UIДоступно на GitHub менее чем через три месяца 5.1kзвезды.

naive ui.jpg

Он предлагает более 70 хорошо продуманных компонентов, которые можно легко интегрировать практически в любое приложение Vue3. Компоненты Naive обладают отличной производительностью, широкими возможностями настройки и поддержкой TypeScript, что обеспечивает отличный опыт разработки.

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

Quasar

Официальный сайт:next.quasar.dev/

Quasar— это полная, ориентированная на производительность платформа, помогающая создавать пользовательские интерфейсы Vue (SPA, PWA, SSR, мобильные и настольные компьютеры), в дополнение к Vue, Node и Webpack, Quasar также включает Cordova, Capacitor и Electron, которые помогают создавать настольные и мобильные приложения. без необходимости учиться отдельно.

quasar.jpg

QuasarФреймворк, кажется, основан на Material Design, но как только вы начнете, все можно будет красиво настроить в соответствии с вашей собственной системой дизайна.

Поддержка Vue3 также быстрая, и Quasar выпустила почти все компоненты, плагины и директивы v1. Кроме того, они также опубликовалисоставные компоненты, чтобы помочь разработчикам глубже понять Quasar API.

PrimeVUE

Официальный сайт:Prime Faces.org/Prime V UE/ это…

PrimeVUEЭто также один из первых фреймворков, поддерживающих Vue3, и он не разочаровывает.PrimeVUEС более чем 80 компонентами он зарекомендовал себя как один из фреймворков с самым широким набором компонентов в этом списке.

primevue.jpg

Компоненты включают формы паролей с датчиками, ползунками, деревьями, графиками, сплит-кнопками, ручками, диаграммами и многим другим. PrimeVUE даже интегрирует библиотеку проверки формы Vuelidate. Поставляется с готовыми темами и предоставляет полноценный визуальный редактор, который помогает разработчикам настраивать свои собственные темы.

Суммировать

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