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

Автор: Дэвид Нвадиогбу

С выпуском Nuxt 3 (бета) 12 октября 2021 года вам может быть интересно, что это значит для сообществ Nuxt.js и Vue.js. В этом выпуске были представлены захватывающие новые функции и улучшения процесса разработки, о которых рассказывается в этой статье.

Во-первых, давайте поговорим о трех основных изменениях в фреймворке.

3 основных изменения фреймворка

1. Полная перезапись TypeScript

Nuxt 3 был полностью переписан с нуля с помощью Typescript для упрощения обслуживания и встроенной поддержки TypeScript. Кажется, что все в экосистеме фреймворка JavaScript делают это в настоящее время и не зря. Система статического типа может помочь предотвратить многие потенциальные ошибки во время выполнения по мере роста приложений, поэтому популярность TypeScript продолжает расти по мере того, как все больше систем продолжают внедрять его в свои сборки. Хотя необязательно писать приложения Nuxt на TypeScript (использование простого JavaScript — это нормально, и он по-прежнему работает должным образом), сейчас самое подходящее время для добавления TypeScript в ваш стек разработки Nuxt.

Структура папок Nuxt 3 по умолчанию теперь с nuxt.config.ts и файлом tsconfig.json

2. Поддержка Vue 3 и Vite

Это правильно, что Nuxt 3 был создан для поддержки функций Vue 3. Vue 3 был выпущен в октябре 2020 года и с тех пор получил высокую оценку сообщества Vue. Поскольку Nuxt 3 написан на Vue 3, вы получаете доступ к таким функциям, как Composition API, улучшенный импорт модулей и общая улучшенная производительность приложения.

Nuxt 3 также поставляется с поддержкой Vite, которая обратно совместима с Nuxt 2. Vite — это инструмент сборки, цель которого — обеспечить более быструю и экономичную разработку современных веб-проектов. Некоторые разработчики утверждают, что предварительная сборка, которую делает Vite, увеличивает скорость загрузки страницы в 10–100 раз по сравнению с другими сборщиками JS. Чтобы узнать больше о Vite, вы можете взглянуть на этот вводный курс по Vue Mastery, который преподает сам Эван Ю (создатель Vue и Vite).

3. Новый серверный движок

Новый серверный движок Nuxt 3 под названием Nuxt Nitro — это независимый от платформы и легкий сервер, который не зависит от времени выполнения Nuxt. Он открывает новые возможности полного стека для Nuxt, позволяя вам создавать маршруты API, как если бы вы создавали страницы непосредственно в своем приложении Nuxt. Если вы когда-либо работали с Nextjs, это должно показаться вам знакомым. Nuxt Nitro быстро запускается, идеально подходит для рендеринга на стороне (более производительный тип рендеринга с меньшими задержками сетевых вызовов) и может быть развернут где угодно. Это делает приложения Nuxt более легкими и быстрыми, а также является первым сервером приложений JavaScript, переносимым между различными современными поставщиками облачного хостинга, такими как Netlify, Vercel, Cloudflare и т. д.

Если вы хотите узнать больше о Nuxt Nitro, у члена команды Nuxt Core Дэниела Роу есть видео, в котором он рассказывает об этом.

Платформы, на которых размещаются приложения Nuxt благодаря Nuxt Nitro

Улучшенный опыт разработчиков

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

(i) Nuxt CLI на стероидах

Интерфейс командной строки Nuxt (известный как nuxi) помогает создавать совершенно новые проекты без каких-либо усилий. Интерфейс командной строки теперь поставляется с новым встроенным интерфейсом модулей, который помогает выполнять команды быстрее и эффективнее. Он также обратно совместим, поэтому, даже если вы используете Nuxt 2, вы можете пользоваться некоторыми его преимуществами.

(ii) Новая приостановка

Suspense Nuxt реализован с помощью нового компонента Vue 3 suspense. Приостановка — это специальный компонент, который отображает резервный контент вместо вашего компонента до тех пор, пока не будет выполнено условие. Это условие обычно представляет собой асинхронные операции, происходящие в ваших компонентах. Если вы когда-либо использовали React Suspense, это должно показаться вам знакомым. Имейте в виду, что приостановка в настоящее время не должна использоваться в производстве, поскольку на момент написания этой статьи (октябрь 2021 г.) она все еще является экспериментальной функцией.

(iii) Комплект Nuxt

Nuxt Kit — это, по сути, Nuxt SDK, который предоставляет ключевую функциональность Nuxt пользователям и авторам модулей таким образом, чтобы он продолжал работать независимо от того, как изменится ядро ​​Nuxt в будущем. Это означает, что авторы модулей теперь могут создавать более мощные модули с помощью Nuxt Kit, которые будут работать как на Nuxt 2, так и на Nuxt 3. Как пользователь, вам не нужно беспокоиться о несовместимых модулях или нарушении изменений, которые могут потребовать от вас повторной архитектуры вашего код, даже если ядро ​​Nuxt изменится в будущем.

(iv) Инструменты разработки Nuxt

Да, вы правильно прочитали! Nuxt теперь имеет инструменты для разработчиков. Это обновление, которое многие не ожидали, но оно все равно им понравится. Благодаря инструментам разработки Nuxt процесс разработки значительно улучшился. Теперь вы можете быстрее и лучше отслеживать и отлаживать свое приложение, используя информацию из работающего экземпляра dev, вводимую в ваш браузер и IDE.

(v) Нуст-Бридж

Хотя это все очень интересные функции и дополнения к фреймворку. Вопрос Что все это значит для сообщества Nuxt и существующих проектов Nuxt все еще остается. К счастью, команда Nuxt учла это и разработала Nuxt Bridge. Как следует из названия, Nuxt Bridge действует как мост между Nuxt 2 и Nuxt 3, позволяя вам использовать и наслаждаться функциями Nuxt 3 в существующем проекте Nuxt 2. Вы можете узнать больше и начать работу с мостом Nuxt здесь.

Мост Nuxt в сравнении с Nuxt 2 и Nuxt 3

(vi) Лучший DX

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

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

Следующий шаг

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

Хотя Nuxt 3 все еще находится в стадии бета-тестирования, это просто означает, что его пока нельзя использовать для создания рабочих приложений. Но вы можете попробовать его в режиме разработки, следуя этому руководству по началу работы в официальной документации Nuxt 3. Рекомендуется, чтобы вы пытались ломать вещи и сообщать об ошибках / проблемах и отзывах о репозитории, которые помогут улучшить структуру. У сообщества Nuxt также есть сервер discord с тысячами активных пользователей Nuxt и модераторов Nuxt, которые готовы ответить на любые ваши вопросы о Nuxt 3.

Первоначально опубликовано на https://www.vuemastery.com 3 ноября 2021 г.