Nuxt 3 первые шаги.

Так что я большой поклонник Nuxt, и совершенно очевидно, что я был очень взволнован, когда наконец была выпущена новая версия фреймворка [3]. Только после того, как у меня была возможность установить его и немного поиграть. Но мы все знаем, что это была очень ранняя стадия бета-тестирования, и первые пару дней вкладка задач на GitHub заполнялась очень быстро. Естественно, моей второй мыслью было — давайте покрутим, чтобы немного согреться.

Пару дней назад решил еще раз проверить. Перед этим я провел некоторое общее исследование уже рассмотренных/переведенных сторонних инструментов, таких как модули, плагины и библиотеки. Забавно, потому что есть уже созданный сайт, который собирает все эти вещи и сообщает нам, на какой стадии они находятся. В общем, если бы я верил в это, это выглядело не очень хорошо, но работа шла полным ходом, и мы становились ближе день ото дня.

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

Теперь, во время моего исследования, я нашел много руководств о том, как подключить Nuxt 3 к новым модулям, таким как i18n, Algolia или Axios. Также были готовые шаблоны со всеми необходимыми зависимостями. Это здорово, но технология новая, свежая и еще не готова к производству. Было бы неплохо хотя бы узнать его получше, все нюансы, которые он несет для наших новых проектов. У меня такое ощущение, что все просто бросились на жирную ерунду, даже не проверив текущее состояние стабильности решения.

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

Еще одно отказ от ответственности — я работаю с IDE WebStorm, поэтому некоторые вещи могут отличаться от VSC (Visual Studio Code), но я думаю, что очень маленькие.

Монтаж

Переходим к установке Nuxt 3…

npx nuxi init nuxt3-app

Хорошо, обо всем по порядку. Что такое nuxi? Это новый Nuxt CLI (интерфейс командной строки), который поможет вам установить и управлять всеми компонентами Nuxt.

В качестве результата вы получите это.

🎉  Another dazzling Nuxt project just made! Next steps:
📁  `cd nuxt3-app`
💿  Install dependencies with `npm install` or `yarn install`
🚀  Start development server with `npm run dev` or `yarn dev`

Отлично, давайте перейдем в эту новую папку с nuxt3-app. Что внутри? Получается, что не так уж и много... А вот это здорово, спросите почему. Ну, это новая структура проекта.

О боже, это нечто совсем другое, чем мы знаем из процесса установки Nuxt. Итак, это новая минимальная начальная установка Nuxt, которая позволяет вам начать создавать свои проекты для ваших нужд, не удаляя папки и файлы, а добавляя их, и TBH для меня это было очень освежающе и довольно интересно, может быть умно? Здесь у вас есть файл app.vue, который представляет собой простой компонент Vue и конфигурации Nuxt, TypeScript. Что еще более интригует, конфиги совершенно пусты… ну, nuxt.config.ts — это tsconfig.json, расширенный из стандартного, который уже помещен в пакет Nuxt.

Теперь я понимаю, почему так много шаблонов со всеми папками и зависимостями. Удобно, да знаю, не фатально ли не знать, что творится с твоим шаблоном? 🤔

Давайте продолжим со стартовой информацией, которую мы получили после инициализации. Давайте установим зависимости.

npm install or yarn 

Вите

Что самое важное в процессе установки, так это то, что по умолчанию вы получите Vite на борту. Однако это очень удобно, так как Webpack также будет установлен, так что вы сможете переключаться с одного на другой. Как? Установив для vite значение false в файле nuxt.config.ts. Так.

ОБНОВЛЕНИЕ: Webpack больше не устанавливается по умолчанию, поэтому для его использования необходимо использовать специальный модуль. Теперь Vite используется по умолчанию, и это здорово!

Пожалуйста, не делайте этого. Если вы еще не знакомы с Vite, вам нужно наверстать упущенное, но в двух словах: это сверхбыстрый «движок» сборки/комплектации, который ускорит ваш процесс разработки.

Хорошо, здесь я хотел бы остановиться на мгновение. Итак, на одной из моих машин (MBP) я столкнулся с некоторыми проблемами с Vite — он сообщает о какой-то проблеме с исходными файлами сборки и Nuxt.

[vite:import-analysis] Cannot read property 'uid' of undefined

И на данный момент я не могу найти решения или связанной с этим проблемы ни в репозитории Nuxt, ни в Vite. Может в новой версии это покроется, может что-то с моим новым M1 Mac, может что-то с зависимостями. Забавно, потому что на другом Mac (Mini) он работает отлично. Пробовал разные версии библиотек, даже Node. Ничего не помогло.

Для решения этой проблемы я использовал Webpack, но и тут не обошлось без проблем. Что-то не так с HMR (Hot Module Replacement) и оно не останавливается после запуска приложения, постоянно обновляется — не дожидаясь изменений — и в итоге забивает браузер. Опять же, это может быть что-то со мной, потому что я не могу найти подобной проблемы в экосистеме Nuxt. Единственное, что вы можете сделать с этим, — отключить HMR, что не так эффективно, но на данный момент это решение проблемы. Вот как вы можете это сделать.

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

ESLint и красивее

Ладно, перейдём к чему-нибудь более приятному. Во всех своих проектах я использую ESLint и Prettier, и здесь я бы тоже хотел их иметь. Опять же, ваш новый проект Nuxt будет довольно обнаженным, поэтому вам нужно будет добавить несколько дополнительных сторонних помощников, таких как приведенные выше. После некоторых тестов и исследований я отшлифовал лучший набор правил и рекомендаций по умолчанию, которые вы можете использовать для своего нового проекта Nuxt/Vue 3. Вот он, ваш файл .eslintrc.js.

Запустите эту команду, чтобы установить их все.

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-standard eslint-config-prettier eslint-plugin-prettier eslint-plugin-nuxt eslint-plugin-vue

Правильно, правила и пользовательские настройки — это то, что вы можете установить для своих нужд, но я хотел бы добавить здесь небольшое примечание. Вы, вероятно, начнете создавать свои компоненты с новой нотацией <script setup>, и при импорте некоторых внешних ресурсов, таких как компоненты, вы столкнетесь с проблемой неиспользуемых переменных — по крайней мере, с WebStorm, хотя я предполагаю, что и с VSC. Чтобы справиться с этим, вы можете добавить какое-то специальное правило в свой файл .eslintrc.js.

'vue/script-setup-no-uses-vars': 'off'

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

Красивый конфиг тоже что-то личное, поэтому я не буду его сюда вставлять. 😏 То же самое для файла игнорирования ESLint, создайте его и заполните для своих настроек.

Наконец, вы можете добавить этот скрипт в свой файл package.json.

"lint": "eslint --ext .js,.ts --ignore-path .eslintignore ."

Страницы и макеты

ХОРОШО. Одной из замечательных функций Nuxt является автоматически сгенерированная маршрутизация. Он лежит в структуре папок pages. Прежде чем Nuxt распознает эту структуру, вам нужно удалить файл app.vue из корневой папки. Затем создайте папку pages. Поместите туда файл index.vue. Отлично, у вас есть первая автоматически сгенерированная страница, как у старого доброго Nuxt, верно? Подробнее об этой волшебной папке вы можете прочитать здесь.

С Vite on borad все эти действия и процессы будут такими быстрыми.

Что еще более важно, вам нужен макет для ваших страниц, и функция макетов по-прежнему доступна в Nuxt 3, но ее конструкция немного отличается. Теперь вы используете не компонент <nuxt /> для размещения содержимого страниц, а компонент slots. Конечно, вам нужно создать макет по умолчанию. Так.

Теперь, если вы поместите что-то на индексную страницу, это будет отображаться вокруг макета по умолчанию в области <slot />.

Автоимпорт

Вероятно, этот поразит вас. Теперь Nuxt 3 может автоматически импортировать ваши компоненты и даже компонуемые объекты. Вам просто нужно поместить их в специальные папки и все. Больше не нужно использовать импорт в ваших компонентах, такое сексуальное и чистое решение! Вы можете проверить его в действии вместе с этой специальной демонстрацией.

Мета страницы

Эта вещь все еще с нами с Nuxt 3. Но теперь вам нужно использовать ее с немного другой конфигурацией. Вы больше не будете использовать свойство head, теперь meta — ваш агрегатор. Вы можете использовать это так.

Что еще лучше, теперь вы можете определять метаданные прямо из вашей разметки компонентов. Это безумие и в то же время круто, TBH.

Данные страницы с <script setup>

Это может быть актуально не для всех, но если вы используете <script setup> и хотите добавить некоторые дополнительные данные страницы, такие как заголовок, вместе с нотацией script setup, вам понадобится дополнительный сценарий. Так.

Не забудьте сохранить одно и то же определение языка для обоих.

Статические активы

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

<img src="/img/icon/icon.svg" alt="Icon" />

Отличная работа. Я думаю, что у вас есть все необходимое, чтобы начать разработку с Nuxt 3. Конечно, теперь стена начнет расти. Мы можем заняться этим в следующей статье — выборка данных, стилей, компоновок и так далее. Продолжайте проверять мой профиль, чтобы узнать больше. Вы также можете подписаться на информационный бюллетень, чтобы не пропустить это замечательное содержание. Здоровья, Лукас.

Хотите еще?

Ознакомьтесь со статьей Nuxt 3: следующие шаги прямо сейчас.