Зачем использовать Nuxt.js?

Зачем использовать Nuxt.js?

Vue.js - отличный выбор в качестве основы для вашего приложения. Но есть пара проблем, с которыми вы, вероятно, столкнетесь:

  • Как мне объединить и настроить все мои библиотеки JavaScript & Vue для эффективной совместной работы?
  • Как структурировать код моего приложения, используя лучшие практики?
  • Как мне убедиться, что мое приложение правильно проиндексировано поисковыми системами?
  • Как мне оптимизировать приложение Vue по скорости?

Вот некоторые из проблем, которые Себастьен и Александр Шопен решили решить, создавая Nuxt.js, высокоуровневую инфраструктуру, построенную на основе Vue, чтобы помочь вам создавать готовые к работе приложения Vue.

enter image description here

Я хочу рассказать вам о 7 проблемах, с которыми вы столкнетесь при создании приложения Vue, и рассказать, как Nuxt их поможет решить.

Проблема № 1: Сложно создать готовое к работе приложение Vue с нуля

Nuxt поставляется не только с предварительно настроенными Vuex, Vue Router и Vue-Meta, но и настраивает ваш проект с интеллектуальными настройками по умолчанию, основанными на хорошо изученных лучших практиках, которые Vue не даст вам сразу.

Проблема № 2: Нет стандартной структуры папок

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

📁 Каталог pages для ваших видов приложений и маршрутов.

📁 Каталог layouts для ваших шаблонов макета.

📁 Каталог store для файлов вашего Vuex.

Проблема № 3: Конфигурация маршрутизации может быть длинной в большом приложении Vue

С Nuxt вы просто помещаете свои отдельные файловые компоненты Vue в папку страниц, и Nuxt автоматически генерирует ваши маршруты с нулевой конфигурацией.

enter image description here

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

Проблема № 4: Нет стандартного способа настроить все вместе

К счастью, Nuxt поставляется с готовой производственной конфигурацией, которая не заблокирована для вас. То есть, если вы хотите переопределить какие-либо интеллектуальные значения по умолчанию или предварительную конфигурацию, вы можете отредактировать файл nuxt.config.js и изменить любую из опций.

enter image description here

Проблема № 5: Приложения Vue не оптимизированы для SEO

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

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

Проблема № 6: Vue приложений при начальной загрузке может быть медленным

При использовании Nuxt.js, если вы решите сделать приложение универсальным или статическим, предварительно обработанный HTML-код заставит вашу страницу быстрее загружаться в браузере. Как только он будет загружен, он начнет работать как обычный SPA. Кроме того, благодаря автоматическому разделению кода загружается только тот JavaScript, который необходим для создания функции маршрута.

Это делает для оптимального пользовательского опыта.

enter image description here

Проблема № 7: С приложением Vue вы можете столкнуться с трудностями при изменении поведения фреймворка

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

🏁 Вывод

Вот 7 проблем, которые Nuxt решает для вас. Как видите, Nuxt.js позволяет тратить меньше времени на настройку и больше времени на решение проблем и создание потрясающих приложений Vue.

 

автор Artem Bohuslavskiy