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

Шаг 1: Переход на официальный сайт

Переходим на официальный сайт nuxt.com, где есть раздел Get Started. Первое, что у нас открывается — это раздел Installation (установка). Давайте посмотрим, как мы можем это сделать.

Шаг 2: Проверка версии Node.js

Первое, на что нужно обратить внимание — это версия Node.js на вашем компьютере. У вас должна быть установлена версия Node.js 18 или более новая, иначе приложение может работать со сбоями.

Я создал пустую папку для проекта. Чтобы убедиться, какая версия Node установлена, выполняем команду:

node -v

У меня установлена двадцатая версия Node, поэтому я могу продолжить создавать новый проект.

Шаг 3: Выбор редактора и установка проекта

Они рекомендуют использовать текстовый редактор Visual Studio Code, но в принципе можно работать и в других редакторах, таких как WebStorm, PHPStorm или другие альтернативы.

Развернуть проект можно различными пакетными менеджерами, например npm, yarn и другими. Давайте воспользуемся стандартным решением — npm, который идёт по умолчанию. Выполняем команду:

npx nuxi@latest init my-project

Имя проекта можно выбрать любое, например TestNext. Соответственно, в выбранной директории создастся папка с проектом.

Шаг 4: Инициализация Git и установка зависимостей

На этапе установки будет предложено инициализировать Git-репозиторий — выбираем Да.

Теперь выполняем команды:

cd TestNext
npm install

Проект развернётся, и все необходимые зависимости установятся.

Шаг 5: Запуск локального сервера

Чтобы перейти в директорию проекта, выполните команду:

cd TestNext

Далее запускаем локальный сервер для разработки командой:

npm run dev

Скрипт запускает локальный сервер на порту 3000. Перейдя по адресу http://localhost:3000, вы увидите заставку, а затем базовый компонент, встроенный в систему.

Этот компонент можно найти в файле App.vue. Он называется Next Welcome. В дальнейшем вы можете расширять и модернизировать проект, создавая полноценный веб-сайт.

Вот такой простой алгоритм установки Nuxt-приложения.