Введение

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

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

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

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

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

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

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

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

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

Vue с Webpack и Babel

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

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

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

Возможности

  • Написание Vue-файлов
  • Автоматическое разделение кода
  • Серверный рендеринг
  • Мощная система маршрутизации с Асинхронными данными
  • Обслуживание статических файлов
  • Транспиляция ES2015+
  • Сборка и минификация JS & CSS
  • Управление элементами в блоке <head> (<title>, <meta> и др.)
  • Горячая замена модулей при разработке
  • Пре-процессоры: SASS, LESS, Stylus, и др.
  • HTTP/2 push headers ready
  • Расширение с модульной архитектурой

Схема

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

nuxt-schema

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

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

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

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

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

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

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

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

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

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

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

-| pages/
----| about.vue
----| index.vue

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

-| dist/
----| about/
------| index.html
----| index.html

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

Лучший пример — этот сайт. Он сгенерирован и размещён на Netlify. Смотрите наш исходный код или Как развернуть Nuxt.js на Netlify от Vue School.

Мы не хотим вручную генерировать приложение каждый раз, поэтому мы обновляем документацию репозитория. Это вызывает событие для Netlify, которое:

  1. Клонирует репозиторий nuxtjs.org
  2. Устанавливает зависимости с помощью npm install
  3. Запускает npm run generate
  4. Размещает директорию dist

Таким образом, у нас теперь есть Статически Сгенерированное Веб Приложение :)

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

Смотрите Как развернуть приложение на Netlify? для дополнительних сведений о развёртывании на Netlify.

Contributors

Обнаружили ошибку или хотите внести свой вклад в документацию? Отредактировать эту страницу на GitHub!

Platinum Sponsors

Storyblok
Support Us