От автора: давайте сегодня поговорим о том, что такое Nuxt.js. Что можно создавать с его помощью, какими возможностями обладает новая технология, как она может быть полезна для разработчиков — обо всем этом будет подробно рассказано в данном материале.
Речь пойдет о фреймворке высокого уровня, созданном с помощью Vue.js. Он позволяет создавать готовые к работе веб-приложения и призван упростить разработку универсальных и одностраничных сервисов.
Nuxt.js построен с целью улучшения Vue.js. Таким образом, они не являются взаимозаменяемыми. Vue.js может работать без Nuxt.js, но последний без Vue не обойдется. Он — основа для более простого создания сложных приложений Vue, не предназначенная для других фреймворков.
Nuxt делает за нас довольно много. Достаточно поместить в директорию «pages» файл «index.vue» с компонентом — и у нас готов одностраничник, который можно запустить в отладочном режиме командой «nuxt» и открыть на «localhost». Почти то же самое может «голый» Vue с Webpack, но даже в таком минимальном примере фреймворк уже начинает помогать нам «под капотом»: из коробки включен Hot Reloading, для страниц настроены кодировки, заголовки и все прочее.
Преимущества Nuxt.js
Давайте более подробно рассмотрим преимущества фреймворка и разберемся, почему мы его можем использовать, как он упрощает разработку, что он делает быстрее и лучше.
Простое создание универсальных приложений
Одно из главных достоинств заключается в том, что фреймворк облегчает создание универсальных приложений. Последние написаны на JavaScript, причем скрипты используются как на стороне клиента, так и на стороне сервера.
Многие современные JavaScript-фреймворки, такие как Vue, нацелены на создание одностраничников (SPA). У SPA есть много преимуществ, по сравнению с традиционным веб-сайтом. Например, вы можете создать очень высокоскоростной пользовательский интерфейс, который быстро обновляется.
Но у SPA также есть свои недостатки — например, длительное время загрузки. Google борется с ними, потому что изначально на странице нет контента для сканирования в целях SEO. Все содержимое генерируется с помощью JavaScript по факту.
Универсальное приложение подразумевает наличие SPA, но вместо пустой страницы index.html вы предварительно загружаете свое творение на веб-сервер. Также отправляете визуализированный HTML в качестве ответа на запрос браузера для каждого роута. Это помогает ускорить загрузку и улучшить SEO, упрощая для Google сканирование страницы.
Создание универсальных сервисов может быть утомительным, потому что вы должны выполнить большую настройку как на стороне сервера, так и на стороне клиента. Это проблема, которую Nuxt стремится решить для Vue. Фреймворк позволяет легко обмениваться кодом между клиентом и сервером, чтобы вы могли сосредоточиться на логике вашего приложения.
Источник: https://blog.jscrambler.com/nuxt-js-the-first-encounter
Он предоставляет вам доступ к свойствам — таким как Server и Client — в ваших компонентах, чтобы вы могли легко решить, будете ли вы рендерить что-то на клиенте или на сервере. Существуют также специальные компоненты, такие как no-ssr, который используется для преднамеренного предотвращения рендеринга на стороне сервера.
Статический рендеринг
Самое большое новшество приходит с командой nuxt generate. Она полностью генерирует статическую версию вашего сайта. Фреймворк создаст HTML для каждого из ваших роутов и поместит его в свой собственный файл.
Преимущества такого подхода очень похожи на достоинства универсальных приложений. Там есть разметка, необходимая для того, чтобы ускорить загрузку страницы, а также помочь поисковикам и сканерам в социальных сетях сканировать сайт. Разница в том, что вам больше не нужен сервер. Все генерируется на этапе разработки.
Это очень мощно, потому что вы получаете преимущества универсального рендеринга без необходимости в сервере. Вы можете просто разместить свое творение на страницах GitHub или Amazon S3.
Автоматическое разбиение кода
Фреймворк может генерировать статическую версию вашего сайта со специальной конфигурацией Webpack. Для каждого статически генерируемого роута (страницы) он также получает свой собственный файл JavaScript, содержащий только код, необходимый для запуска.
Источник: https://blog.jscrambler.com/nuxt-js-the-first-encounter
Это действительно может помочь со скоростью, потому что размер файла JavaScript остается небольшим, по сравнению с размером всего приложения.
Отличная структура проекта по умолчанию
Во многих небольших приложениях Vue вы управляете структурой кода, в лучшем случае, в нескольких файлах. Структура Nuxt.js по умолчанию дает вам отличный старт для организации вашего сервиса в понятной форме.
Источник: https://blog.jscrambler.com/nuxt-js-the-first-encounter
Вот несколько основных каталогов, с которыми он настраивается:
components — папка, позволяющая упорядочить отдельные компоненты Vue;
layouts — папка для размещения основных макетов приложений;
pages — папка для хранения роутов вашего приложения. Nuxt.js читает все файлы .vue в этом каталоге. Затем он создает роуты приложения;
store — папка для хранения всех файлов Vuex Store вашего приложения.
Компиляция ES6/ES7 без дополнительной работы
Помимо Webpack, Nuxt.js также поставляется в комплекте с Babel. Последний обрабатывает компиляцию последних версий JavaScript — таких как ES6 и ES7 — в код, который можно запускать в старых браузерах.
Nuxt.js настраивает Babel для вас, чтобы все файлы .vue и весь код ES6, который вы пишете внутри тегов script, компилировались в JavaScript, работающий во всех браузерах.
Источник: https://nuxtjs.org/guide
Автоматически обновляемый сервер для легкой разработки
Разработка с участием нашего сегодняшнего героя очень проста. Он устанавливает автоматическое обновление сервера. Пока вы разрабатываете код и работаете с файлами .vue, Nuxt.js использует конфигурацию Webpack для проверки изменений и компилирует все для вас. Вы можете запустить команду npm run dev внутри проекта, и сервер разработки настроится.
Nuxt.js — это удобный инструмент, который позволяет быстро создавать действительно сложные приложения. Если вам необходима высокая результативность SEO, или у вас проблемы с обработкой сложных приложений только с помощью Vue, то вам стоит попробовать этот вспомогательный фреймворк.
Он обеспечивает отличную файловую структуру, улучшает роутинг, обеспечивает рендеринг на стороне сервера и позволяет создавать универсальные сервисы. Вы можете сделать все это самостоятельно, но такой подход всегда требует времени, и иногда для него необходимы действительно хорошие навыки.
Вот для чего нужен Nuxt — создать что-то отличное, сложное и хорошо работающее, не тратя время на подготовку. С этим фреймворком вы просто генерируете шаблон — и все, самая сложная работа делается практически без вашего участия.
При написании статьи использовались материалы:
