Документация по nuxt доступна здесь: Nuxt 3 documentation
Примеры элементов дизайна и реализованных компонентов доступны по адресу http://localhost:3000/styleguide
В исходном коде страница расположена здесь: pages/Styleguide.vue. На этой странице подключаются компоненты с примерами различных блоков. Открыв нужный блок можно посмотреть примеры.
В проекте используются готовые библиотеки для реализации различного функционала. Документацию по ним можно посмотреть по ссылкам.
- Bootstrap 5 - сетка, инпуты и прочие элементы. JS часть используется довольно редко из-за недостаточного удобства, гибкости и недостаточного функционала.
- floating-vue - используется для реализации выпадающих меню (при клике и наведении).
- Swiper - используется для реализации слайдеров. Готовые vue компоненты не используются из-за недостаточной гибкости. В проекте реализованы собственные компоненты в которых используется swiper в чистом виде.
Для удобства исходный код иконок копируется и создается vue компонент в который размещается код иконки.
Иконки расположены здесь: components/Icons
Названия компонентов необходимо указывать с префиксом Icon для удобства работы с автокомплитом в IDE
Открываем консоль и клонируем проект себе:
git clone [email protected]:enterprise-it-ru/nuxt-template.git nuxt-templateПереходим в папку в которую склонировался проект (в команде выше это greenspark-frontend)
cd nuxt-templateУстанавливаем зависимости:
npm installТеперь нужно создать файл с переменными окружения. Для этого копируем файл .env.example и сохраняем его просто с именем .env
Скопировать можно с помощью команды:
cp .env.example .envВ этом файле при необходимости изменяем домен проекта и прочие настройки если они есть.
Запускаем сервер разработки. Он будет доступен по адресу http://localhost:3000
npm run devДля сборки проекта в боевом режиме используется команда:
npm run buildЛокально можно запустить сервер и посмотреть как отрабатывает SSR и прочие возможности следующей командой:
npm run preview