Некоторые инструменты-убийцы, которые вы можете использовать в экосистеме Vue 3.

Экосистема Vue.js претерпела изменения за последние несколько лет, особенно после того, как Vue 3 стала версией по умолчанию с 7 февраля 2022 г.. В этом посте основное внимание будет уделено инструментам, которые вращаются вокруг экосистема Vue 3.

Введение

В экосистеме Vue.js есть множество инструментов, которые значительно упростили создание приложений с помощью Vue.js и расширили возможности разработчиков. API композиции Vue, состоящий из системы Vue Reactivity (ref & reactive), хуков жизненного цикла и механизмов внедрения зависимостей, таких как Provide и Inject, предоставил разработчику гибкость для создания еще более мощных инструментов для экосистемы Vue.js.

Без дальнейших церемоний, давайте посмотрим на некоторые из лучших инструментов в экосистеме Vue.js.

1. Версия 3

Номер один в нашем списке — сам Vue 3. Vue 3 представил множество невероятных и удобных функций, концепций и API-интерфейсов, таких как Teleport, который полезен для создания модальных окон, переменных реактивности с ref и reactive, CSS, управляемый состоянием, поддержка модулей CSS, слотовые селекторы, множественные привязки v-модели, Фрагменты, Приостановка (экспериментальная) и настройка сценария.

2. Использование Vue

VueUse, созданный Энтони Фу, представляет собой набор основных утилит Vue Composition для Vue 2 и 3. Идея VueUse состоит в том, чтобы создать набор часто используемых функций в веб-приложениях Vue и объединить их в полный древовидный пакет, созданный с системой реактивности Vue.js. На момент написания статьи доступно более 200+ составных функций. Одной из привлекательных особенностей VueUse является то, насколько хорошо написана документация, с примерами TypeScript и интерактивными демонстрациями.

3. Вите

Vite — это революционный инструмент для сборки фронтенда, который значительно повлиял на всю экосистему фронтенда. Это инструмент сборки. который направлен на обеспечение более быстрого и компактного опыта разработки. Он предоставляет как сервер разработки с невероятно быстрым HMR, так и сборщик на основе свертывания. Он становится все более популярным, имея один из самых высоких показателей усыновления за последнее время.

Такие фреймворки, как Nuxt, Vue.js и Svelte, сделали Vite своим официальным сборщиком. Сервер разработки Nuxt 3 стал невероятно быстрым благодаря внедрению Vite, что привело к улучшению опыта разработчиков при создании веб-приложений с помощью Nuxt.

4. Нуст3

На момент написания этой статьи Nuxt3 находится в RC. Он построен на основе Vue 3 и использует Vite в качестве сборщика для молниеносной HMR. По сравнению с Nuxt 2 он намного легче, быстрее и обеспечивает гораздо лучший опыт разработки. Команда Nuxt также потратила значительное количество времени на создание нового серверного движка под названием Nitro, который открывает множество возможностей, включая создание полнофункциональных веб-приложений с помощью Nuxt. Представленные концепции и функции включают:

  • Серверные маршруты: Nuxt3 будет генерировать серверный API, читая файлы в каталогах ~server/api/, ~/server/routes и ~/server/middleware.
  • Гибридный режим рендеринга (скоро): сочетание статического и бессерверного режимов на одном сайте.
  • Сервер разработки с горячей перезагрузкой модулей.
  • useState: Nuxt3 предоставляет useStatecomposable для управления общим состоянием, удобным для SSR, в приложениях Nuxt.

5. Пиния

По сути, Pinia — это Vuex 5. Это официальная библиотека управления состоянием для Vue 2 и 3 с улучшенной поддержкой TypeScript и поддержкой DevTool. Это означает, что вы можете лучше отлаживать логику с отслеживанием состояния, то есть состояние, геттеры и действия из Vue DevTools.

По своей конструкции Pinia является модульной и позволяет разработчикам легко поддерживать свои магазины. Мутировать состояние с помощью Pinia несложно даже по сравнению с Vuex. Вам не нужно создавать действия или мутации, такие как Vuex, чтобы изменить свое состояние в Pinia. Вы можете изменить состояние напрямую с помощью метода$patch. Он также предлагает API стиля управления состоянием и реактивностью. Более того, вы можете комбинировать компонуемую функцию с магазинами Pinia. 🔥

6. Волар

Волар является рекомендуемой заменой расширения IDE для Ветур. Хотя Volar еще не в версии 1, он обеспечивает мощную и превосходную поддержку VS Code для Vue SFC. Теперь есть улучшенная подсветка синтаксиса, полная поддержка шаблонов TypeScript и комментарии в шаблоне Vue, поддержка VitePress и многое другое.
Если вы активно работаете с Vue 3, рассмотрите возможность проверить это обсуждение на GitHub.

7. Витест

Vitest, созданный Энтони Фу, представляет собой молниеносно быструю среду модульного тестирования на базе Vite. Он использует тот же API, что и Jest, но он намного быстрее и набирает популярность за пределами экосистемы Vue.js. Он имеет HMR только для тестовых файлов, а также расширение VS Code, которое упрощает запуск, отладку и визуализацию результатов тестирования в редакторе кода.

8. VeeValidate

VeeValidate версии 4, созданная Абдельрахманом Авадом, представляет собой библиотеку проверки форм для Vue 3. Ее декларативный метод проверки входных данных делает ее мощной и гибкой, и она отлично работает с API композиции. Он имеет два метода проверки формы: подход на основе компонентов и метод Composition API. Как человек, который работал с обоими методами, я предпочитаю и рекомендую подход Composition API, поскольку он обеспечивает большую гибкость и отлично подходит для создания сложных форм.

Еще одна впечатляющая особенность VeeValidate — подключаемый модуль Devtools, доступный в версии 4.5. Он подключается к новому Vue DevTools и предоставляет графический интерфейс для визуализации и программного доступа к состояниям в ваших полях ввода. 💣 🚀

9. ВьюДеми

Еще один инструмент, созданный Энтони Фу 🔥, VueDemi предоставляет набор API, функций и утилит для создания универсальных библиотек для Vue 2 и 3. Если вы являетесь автором библиотеки и хотите обеспечить обратную совместимость для своего проекта Vue.js а также поддерживать Vue 3 без поддержки двух кодовых баз, VueDemi делает это возможным с помощью системы реактивности Vue 3.

10. Vue-запрос

Основанный на React Query, который теперь называется Tanstack Query, Vue Query представляет собой неофициальный адаптер, который предоставляет хуки через API композиции Vue для извлечения, кэширования и обновления управления асинхронным состоянием в Vue.js. Он поддерживает Vue 2 и 3. В настоящее время команда Tanstack работает над адаптером @tanstack/vue-query. Это просто будет официальная поддержка Vue.js. 😸

11. Витрина магазина Vue

Если вы создаете веб-приложение для электронной коммерции с помощью Vue.js или Nuxt, вам следует подумать о подключении к Vue Storefront, молниеносному интерфейсу для безголовой коммерции, построенному поверх Vue.js. Помимо создания Vue Storefront с помощью Vue.js, он также решает ключевые бизнес-проблемы, с которыми сталкивается большинство сайтов электронной коммерции. Большинство сайтов электронной коммерции работают медленно и могут привести к низкому коэффициенту конверсии, VSF чрезвычайно быстр, и он делает это за счет подхода PWA, у него есть возможности для покупок в автономном режиме, возможность создать мощный и настраиваемый сайт электронной коммерции, не задумываясь. слишком много об архитектуре Frontend, поскольку VSF обеспечивает прочную основу для построения сверху. Демо можно найти здесь.

12. Безголовый интерфейс

Headless UI — это проект, созданный Tailwind Labs и состоящий из совершенно не стилизованных, полностью доступных компонентов пользовательского интерфейса, разработанных для прекрасной интеграции с Tailwind CSS. Хотя есть несколько компонентов, эти компоненты тщательно разработаны с отличной поддержкой специальных возможностей.

13. Ионный Вью

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

14. создать-вью

Create-vue — это официально рекомендуемый способ построения проектов Vue 2 и 3. Он создает проект Vue.js на основе Vite, и вы можете дополнительно добавить TypeScript, Pinia, Vue router, Eslint и Prettier. Это также может быть заменой Vue CLI, поскольку Vue 3 и Vite уже являются рекомендуемым способом запуска нового проекта Vue.js.

15. Вуэ «Наруто»

Vue 2.7 под названием Vue Naruto станет последней версией Vue 2, и у него есть некоторые ключевые функции, которые важны для того, как мы создаем приложения Vue.js с современным подходом. Команда Vue.js перенесла некоторые из наиболее важных функций, таких как Composition API, SFC ‹script setup›, SFC CSS v-bind и defineComponent, что обеспечивает лучшую поддержку TypeScript для Vue 2. Полный список всех API выпущен, пожалуйста, ознакомьтесь с официальным сообщением о выпуске здесь.

Это пока все! Дайте мне знать в разделе комментариев ниже, что вы думаете об этой статье. Я общаюсь в Twitter и LinkedIn. Спасибо за чтение и следите за обновлениями для большего.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.