Масштабируем Vue с Nuxt.js

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

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

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

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

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

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

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

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

Nuxt Starter Kit спросит вас о библиотеках, с которых вы хотите начать свой проект, таких как CSS Lint, и какую платформу CSS использовать.

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

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

• Директория страниц, для шаблонов и роутов вашего приложения
• Директория Layouts
• Директория Store, для файлов Vuex хранилища

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Материалы

https://coursehunter-club.net/t/vuemastery-scaling-vue-with-nuxt-js/