Назад

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

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

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

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

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

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

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

 

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

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

  • Vue 2
  • Vue-Router
  • Vuex (только при использовании опции store)
  • Vue-Meta

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

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

 

Возможности

  • Написание Vue-файлов
  • Автоматическое разделение кода
  • Серверный рендеринг
  • Мощная система маршрутизации с асинхронными данными
  • Обслуживание статических файлов
  • Транспиляция ES2015+
  • Сборка и минимизация JS & CSS
  • Управление элементами в блоке head
  • Горячая замена модулей при разработке
  • Интеграция c ESLint
  • Пре-процессоры: SASS, LESS, Stylus, и др.

 

Серверный рендеринг

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

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

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

Если же сервер у вас уже есть, Nuxt.js можно включить как middleware — ограничений нет никаких. См. руководство по программному использованию Nuxt.js.

 

Статическая генерация

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

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

Пример:

 

-| pages/

----| about.vue

----| index.vue

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

 

-| dist/

----| about/

------| index.html

----| index.html

Таким образом, появляется возможность размещения созданного приложения на статическом хостинге!

Сам данный сайт, сгенерированный статически и размещённый на GitHub Pages, является отличным примером этого подхода:

  • Исходный код
  • Сгенерированный код

Генерировать HTML вручную при каждом обновлении репозитория документации мы, разумеется, не хотим, так что каждый пуш вызывает лямбда-функцию AWS, которая:

1. Клонирует репозиторий nuxtjs.org

2. Устанавливает зависимости через npm install

3. Вызывает nuxt generate

4. Пушит получившуюся папку dist в ветку gh-pages

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

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

 

У вас нет прав для комментирования.