Создание базового проекта на Nuxt.js

Перед началом работы с Nuxt.js, необходимо установить Node.js — это базовая платформа (пакетный менеджер), без неё работать с Nuxt вы не сможете.

Создание проекта

Для быстрого старта, разработчики Nuxt.js создали инструмент create-nuxt-app. Он позволяет быстро развернуть рабочий, готовый к разработке проект на Nuxt. Для начала нужно установить пакет npx (поставляется вместе с пакетом NPM начиная с версии 5.2.0). Проверить версию NPM можно следующей командой — npm -v.

Открываем консоль (далее работать будем в ней) и пишем команду:

npx create-nuxt-app <project-name>

Где <project-name> — название вашего проекта на Nuxt. Названием проекта будет названа директория, в которую загрузится Nuxt приложение.

В процессе установки нужно будет задать конфигурацию нашему приложению:

• Project name — Название проекта.
• Programming language — Язык программирования.
• Package manager — Пакетный менеджер для работы с Nuxt.js (я буду использовать NPM).
• UI framework — Фреймворк для работы с Front-End. Я выбираю вариант None, потом мы установим нужный нам фреймворк и в следующих статьях разберемся как подключать их в процессе работы.
• Nuxt.js modules — Дополнительные модули для Nuxt.js (выбираются пробелом). Я нажимаю enter, т. е. не устанавливаю никаких модулей.
• Linting tools — Статический анализатор кода. Проверяет синтаксис и корректность (выбирается пробелом). Я нажму enter и оставлю по умолчанию.
• Testing framework — Тестовый фреймворк, я выбираю None.
• Rendering mode — Мод рендеринга, я выбираю Universal (SSR). Именно он реализует функционал SSR в Nuxt.js и делает наши приложения SEO-friendly.
• Deployment target — Куда деплоить проект. Я выбираю Server — Node.js hosting.

После заполнение предыдущих пунктов, начнется установка пакетов NPM. После установки, переходим в проект и запускаем его:

cd nuxt-site
npm run dev

Запуск клиента и сервера займет немного времени.

После этого, перейдя в адресной строке бразуера по адресу http://localhost:3000 — вы увидите ваш первый проект, созданный на Nuxt.js!