Вступление

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

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

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

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

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

Автоматизация и соглашения

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

  • Маршрутизация на основе файлов: определите маршруты на основе структуры вашего app/pages/ каталога. Это может упростить организацию вашего приложения и избавить от необходимости настройки маршрута вручную.
  • Разделение кода: Nuxt автоматически разбивает ваш код на более мелкие фрагменты, что может помочь сократить время начальной загрузки вашего приложения.
  • Рендеринг на стороне сервера "из коробки": Nuxt поставляется со встроенными возможностями SSR, поэтому вам не нужно самостоятельно настраивать отдельный сервер.
  • Автоматический импорт: записывайте составные элементы и компоненты Vue в соответствующие каталоги и используйте их без необходимости импорта, используя преимущества древовидного анализа и оптимизированных javascript пакетов.
  • Утилиты для извлечения данных: Nuxt предоставляет составные элементы для обработки SSR-совместимой выборки данных, а также различные стратегии.
  • Поддержка TypeScript с нулевой настройкой: с помощью наших автоматически генерируемых типов и tsconfig.json вы можете писать типобезопасный код без необходимости изучать TypeScript.
  • Настроенные инструменты сборки: по умолчанию мы используем Vite для поддержки горячей замены модулей (HMR) при разработке и комплектации вашего кода для производства с использованием лучших практик.

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

Рендеринг на стороне сервера

По умолчанию Nuxt поставляется со встроенными возможностями рендеринга на стороне сервера (SSR) без необходимости самостоятельной настройки сервера, что имеет много преимуществ для веб-приложений:

  • Ускоренное время начальной загрузки страницы: Nuxt отправляет в браузер полностью отрисованную HTML-страницу, которая может быть немедленно отображена. Это может ускорить время загрузки страницы и улучшить пользовательский опыт, особенно в медленных сетях или на устройствах.
  • Улучшенное SEO: поисковые системы могут лучше индексировать страницы SSR, поскольку HTML-контент доступен сразу, а не требует JavaScript для отображения контента на стороне клиента.
  • Повышение производительности на маломощных устройствах: это сокращает объем JavaScript, который необходимо загружать и выполнять на стороне клиента, что может быть полезно для маломощных устройств, которые могут испытывать трудности с обработкой тяжелых приложений JavaScript.
  • Улучшенная доступность: контент становится доступен сразу же после загрузки страницы, что повышает доступность для пользователей, которые используют программы чтения с экрана или другие вспомогательные технологии.
  • Упрощенное кэширование: страницы могут кэшироваться на стороне сервера, что может еще больше повысить производительность за счет сокращения времени, необходимого для создания и отправки контента клиенту.

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

Поскольку Nuxt - это универсальный фреймворк, он дает вам возможность статически отображать все ваше приложение на статическом хостинге с помощью nuxt generate, отключать SSR глобально с помощью опции ssr: false или использовать гибридный рендеринг, настроив опцию routeRules.

Серверный движок

Серверный движок Nuxt Nitro открывает новые возможности для fullstack приложений.

В процессе разработки он использует Rollup и воркеры Node.js для вашего серверного кода и изоляции контекста. Он также генерирует ваш серверный API путем чтения файлов из server/api/ и серверного промежуточного программного обеспечения из server/middleware/.

В процессе работы Nitro объединяет ваше приложение и сервер в один универсальный каталог .output. Этот каталог упрощен: он минимизирован и из него удалены модули Node.js (за исключением polyfills). Вы можете развернуть этот вывод в любой системе, поддерживающей JavaScript, будь то Node.js, Serverless, как SSR или как чистую статику.

Готовность к продакшену

Приложение Nuxt может быть развернуто на сервере Node или Deno, предварительно отрисовано для размещения в статических средах или развернуто у бессерверных и периферийных поставщиков.

Модульность

Модульная система позволяет расширять Nuxt за счет пользовательских функций и интеграции со сторонними сервисами.

Архитектура

Nuxt состоит из различных основных пакетов:

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