Введение

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

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

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

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

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

• File-based маршрутизация: определяйте пути, основываясь на структуре вашей директории pages/. Это упростит организацию вашего приложения и избавит от необходимости в ручной настройке маршрутов.
• Разделение кода(Code splitting): Nuxt автоматически разбивает ваш код на небольшие фрагменты, что может помочь сократить время начальной загрузки вашего приложения.
• Server-side rendering "из коробки": Nuxt поставляется со встроенными возможностями SSR, так что вам не нужно самостоятельно настраивать отдельный сервер.
• Автоматические импорты: Пишите Vue композаблы и компоненты в соответствующих каталогах и используйте их без необходимости импорта, с преимуществами tree-shaking и оптимизированных JS-пакетов.
• Data-fetching утилиты: Nuxt предоставляет композаблы для SSR-совместимого получения данных, а также различные стратегии для этого.
• Поддержка TypeScript без настройки: пишите type-safe код без необходимости изучать TypeScript с нашими автоматически сгенерированными типами и tsconfig.json
• Настроенные инструменты сборки: мы используем Vite по умолчанию для поддержки горячей заменой модулей (HMR) во время разработки и сборки вашего кода для продакшена с использованием лучших практик.

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

Server-Side Rendering

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

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

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

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

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

Серверный движок Nitro открывает новые full-stack возможности.

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

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

Production-ready

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

Модульная система

Система модулей позволяет расширять Nuxt за счет пользовательских функций и интеграции со сторонними(third-party) сервисами.

Архитектура

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

• Основной движок: nuxt
• Сборщики: @nuxt/vite-builder и @nuxt/webpack-builder
• Интерфейс командной строки: nuxi
• Серверный движок: nitro
• Development kit: @nuxt/kit

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