За последние несколько лет популярность Vue JS выросла. Это в основном из-за простоты доступа, которую он предлагает как с точки зрения обучения, так и с точки зрения разработки приложений. Если вы опытный разработчик, который хочет переключиться на просмотр или просто начать работу с правильными инструментами, вы должны это сделать. Правильное использование этих инструментов поможет вам быстро создавать отличные приложения, не изобретая велосипед.

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

Давайте начнем.

1. Интерфейс командной строки Vue

Как и в любой другой среде JavaScript, без инструмента CLI вы мало что можете сделать с Vue. Интерфейс командной строки позволяет быстро создавать структуры проектов и развертывать шаблоны. Он также позволяет создавать мгновенные прототипы для демонстрации новых и расширенных функций/функций.

Помимо обычных функций, Vue CLI предлагает гораздо больше, например, поддержку инструментов веб-разработки, таких как TypeScript, Babel, PostCSS, ESLint, модульное тестирование, PWA и сквозное тестирование. Он также совместим с расширяемыми сторонними плагинами, созданными сообществом.

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

2. Нуст JS

После того, как вы настроили VueJS, настройка правильного шаблона — это первый шаг в создании ваших приложений. Это поможет вам избежать написания кода с нуля. Существует множество вариантов создания шаблонов, но мы выбрали Next JS для нашего списка, так как он позволяет разрабатывать множество типов приложений. Пример: прогрессивные веб-приложения (PWA), S-рендеринг на стороне сервера (SSR), одностраничные приложения (SPA) и статические сайты.

Nuxt также имеет модульную архитектуру и имеет более 50 модулей, которые могут ускорить процесс разработки. Эти модули поддерживают такие задачи, как получение преимуществ от PWA, добавление Google Analytics или создание карты сайта.

Он также предлагает готовую настройку производительности за счет внедрения Vue JS и Node. Лучшие практики JS с помощью анализатора пакетов.

3. Vue-маршрутизатор

Если вы привыкли к любой другой среде JavaScript, концепция маршрутизации не должна быть для вас новой. Для сопоставления компонентов URL-адресов приложений маршрутизаторы могут быть очень полезны. Vue-router хорошо с этим справляется и поддерживает настройку маршрутизатора на основе компонентов.

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

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

4. Векс

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

Разрешены мутации, основанные на состоянии, представлении и действиях. Состояние определяет истины приложения; представление отображает эти истины пользователю, а действия вызывают изменение условия, перезапуская цикл мутации.

Vue-router также предоставляет такие функции, как отладка с нулевой конфигурацией во времени и экспорт/импорт моментальных снимков состояния.

5. Мокко

«Процесс тестирования» является неотъемлемой частью любого приложения. Это обеспечивает ожидания клиентов и развитие надлежащим образом. Это становится еще более важным для приложений, построенных на Vue, или для любого JavaScript-фреймворка в целом.

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

6. Аксиос

Axios — это популярная сторонняя библиотека, предназначенная для создания и управления запросами ajax. После отделения «vue-resource», когда-то «официальной» ajax-библиотеки Vue, из репозитория, команда Vue выбрала Axios. Это привело к увеличению популярности и использования Axios.

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

7. Верифицируйте

Vuetify — это комбинация слов «Vue» и «Beautify», как следует из названия, и она сделает именно это для вашего приложения. Это элегантная библиотека компонентов пользовательского интерфейса ручной работы, которая может помочь вам создавать красивые приложения, даже если вы не дизайнер.

Он предоставляет более 80 компонентов с готовыми каркасами проекта через плагин Vue CLI на основе спецификации дизайна материалов. Также встроена поддержка SSR. Эти компоненты включают оповещения, баннеры, значки, кнопки, элементы ввода и элементы управления для формы, виджеты для прогресса и многое другое.

Вывод

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

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

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