Что такое 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 интернет-магазина. Больше нет нужды во множественных серверах и кешировании!