Nuxt

Nuxt JS

Nuxt — это фреймворк для создания одностраничных, статических и универсальных приложений Vue. С его помощью можно с легкостью создавать приложения на стороне сервера, поскольку в него встроено множество сложных конфигураций, связанных с промежуточным ПО, маршрутизацией, управлением состоянием и асинхронными данными.

Начнем: create-nuxt-app

Команда Nuxt.js разработала инструмент для скаффолдинга create-nuxt-app. Это схожий с create-react-app в проектах React инструмент. Убедитесь, что у вас установлен npx (npx встроен по умолчанию, начиная с версии NPM 5.2.0)

$ npx create-nuxt-app

Или с помощью yarn:

$ yarn create nuxt-app

Вам будет необходимо:

  1. Выбрать интегрированный серверный фреймворк: None (сервер Nuxt по умолчанию), Express, Koa, Hapi, Feathers, Micro или Adonis.
  2. Выбрать фреймворк: None (его можно добавить позже), Bootstrap, Vuetify, Bulma, Tailwind, Element UI, Ant Design Vue или Buefy.
  3. Выбрать тестовый фреймворк: None (его можно добавить позже), Jest или AVA.
  4. Выбрать режим Nuxt (Universal или SPA).
  5. Добавить модуль axios для выполнения HTTP-запроса в приложении.
  6. Добавить EsLint для выполнения анализа кода при сохранении.
  7. Добавить Prettier для форматирования кода при сохранении.

Затем будут установлены все зависимости. Теперь перейдите к папке проекта и запустите его с помощью:

$ cd <project-name>
$ npm run dev

Приложение теперь работает на http://localhost:3000.

Новые функции в последней версии Nuxt JS 2.8.0:

Упрощение разработки

В новой версии 2.8.0 команда Nuxt добавила несколько новых функций для упрощения разработки. Подробнее об этом ниже.

Consola и добавление логов SSR

Consola — это легкий в использовании консольный логгер для Node JS и веб-браузера с удобным выводом. Он поддерживает теги, веб-браузеры и макеты. Его можно установить с помощью любой системы управления пакетами.

С помощью yarn:

yarn add consola

С помощью npm:

npm i consola

Consola выглядит следующим образом:

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

Обновление индикатора сборки

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

Обновления изменений файла

До появления новой версии команда Nuxt обнаружила, что шаблоны, используемые для прослушивания изменений файлов, содержали дубликаты. Эти дубликаты были удалены. Кроме того, изначально использовался обходной путь для воссоздания наблюдателя для необработанных событий в linux. После внесения исправления chokidar обходной путь больше не требуется. Все основные шаблоны теперь могут прослушать только поддерживаемые расширения файлов. В качестве примера можно привести прослушивание директории без поддерживаемых расширений файлов, которые могут перезагружаться из-за изменений файлов, не используемых Nuxt. Например, файлы *.swp, *~ или *.bak, используемые редакторами.

Порт и новые настройки наблюдателя

В новой версии 2.8.0 команда Nuxt установила наблюдателей за созданием pages/ при отображении страницы по умолчанию. Это изменение было реализовано сначала для store/, а теперь оно применяется для создания pages/. Также теперь Nuxt повторно использует тот же порт при случайном присваивании во время выполнения перезапуска в окружении разработки.

Обновления рендерера

В версии 2.6.3 сообщалось о проблеме, связанной с игнорированием рендером команд внедрения. Приложения Nuxt не должны загружать сценарии, если свойство inject для рендера бандлера в файле конфигурации имеет значение false. Однако некоторые сценарии все равно загружались. В качестве решения в этой версии Nuxt была добавлена опция render.injectScripts, а также поддержка render.ssrLog для управления логами SSR.

Список исправленных ошибок

В новой версии Nuxt JS были обнаружены и исправлены следующие ошибки:

  • Рендер Vue: добавлен безопасный формат для логов SSR, а также User-Agent‍ в заголовок Vary в режиме сервера.
  • Сервер: теперь при вызове прослушивания возвращается прослушивание, а также сохраняется случайный порт при перезапуске сервера.
  • Строитель: наблюдение за созданием pages/ при установке отображаемой страницы по умолчанию. Также добавлено прослушивание для изменений файлов для поддерживаемых расширений.
  • Генератор: минимизация резервных одностраничных приложений.
  • Типы: добавлено определение типов для функционального babel.presets.
  • Приложение Vue: удален замыкающий слеш в нестрогом режиме vue-router. Обработчики catch больше не прикреплены к уже загруженным компонентам. Помимо этого, исправлен переход in-out fixPrepatch.
  • Утилиты: обработана serializeFunction для пограничных случаев.

Обновления зависимостей

В новой версии обновлены следующие зависимости:

Заключение

Мы рассмотрели все новые функции и исправленные ошибки в новой версии Nuxt JS. Счастливого программирования!

Читайте также:

Перевод статьи Nwose Lotanna: What’s New in Nuxt JS 2.8.0

Предыдущая статьяСекрет быстрого обучения
Следующая статьяTop 100 наиболее популярных репозиториев на GitHub