Дата публикации
19 Августа 2020
Дата изменения
19 Августа 2020
Уникальных просмотров
5.313

Оглавление

Что такое Nuxt.js?

Nuxt.js — это минималистичный фреймворк для создания приложений на Vue.js.

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

В дополнение, Nuxt.js предоставляет другую опцию разработки: nuxt generate. С помощью неё можно статически генерировать приложения на Vue.js. На взгляд разработчиков Nuxt.js, эта опция может оказаться следующим большим шагом на пути разработки микросервисных веб-приложений.

Кроме того, вы можете использовать Nuxt.js для быстрого создания одностраничных приложений (SPA). Это будет полезно для сохранения возможностей Nuxt при разработке внутренних интерфейсов.

Как фреймворк, Nuxt.js привносит множество возможностей, помогающих разработке, например таких как: асинхронные данные, Middleware, шаблоны, компоненты и др.

Как это работает

Nuxt.js использует следующие элементы для создания современных веб-приложений:

Общий размер составляет всего лишь 57kb min+gzip (60kb при использовании Vuex).

Под капотом используется webpack с vue-loader и babel-loader для сборки, разделения и минимизации вашего кода.

Возможности

Схема

Это схема показывает, как работает Nuxt.js при вызове сервера или когда пользователь совершает переход по приложению через <nuxt-link>:

Схема работы Nuxt.js

Серверный рендеринг (Universal SSR)

Вы можете использовать Nuxt.js как фреймворк для организации всех этапов рендеринга UI в вашем проекте.

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

Одностраничное приложение (SPA)

Если, по какой-либо причине, вы предпочитаете не использовать серверный рендеринг, или вам нужен статический хостинг для ваших приложений, вы можете просто использовать SPA режим используя nuxt --spa. В комбинации со свойством generate, это даёт вам мощный механизм развёртывания одностраничного приложения без необходимости использовать Node.js в режиме реального времени или другие специальные обработки сервера.

Взгляните на следующие команды[LINK_HERE], чтобы узнать больше.

Если же сервер у вас уже есть, вы можете подключить Nuxt.js используя его в качестве промежуточного слоя. Нет никаких ограничений при использовании Nuxt.js для разработки универсальных веб-приложений.

Статическая генерация (Pre Rendering)

Большая инновация Nuxt.js приходит с командой nuxt generate.

Эта команда генерирует HTML-представление для каждого из ваших маршрутов и сохраняет их в соответствующие файлы.

Для примера, посмотрим следующую структуру файлов:

├── pages
│   ├── about.vue
│   ├── index.vue

Будет сгенерировано, как:

├── dist
│   ├── about
│       ├── index.html
│   ├── index.html

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

Неудержимая мысль влечёт нас дальше: представьте интернет-магазин, созданный посредством nuxt generate и размещённый на CDN. Каждый раз, когда товар заканчивается на складе, мы регенерируем приложение. Но если во время этого процесса кто-то использует наше приложение — всё будет актуально благодаря запросам к API интернет-магазина. Больше нет нужды во множественных серверах и кэшировании!

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,4835 s
Время запросов: 0,4835 s
Количество запросов: 27
Источник: cache