Приложение

Это Frontend приложение. Оно создано с использованием фреймворка Vue.js, который является прогрессивным JavaScript-фреймворком для создания пользовательских интерфейсов.

Оглавление

• Техническая документация

  • Предварительные требования
  • Начало работы
  • Переменные
  • Разработка
  • Сборка и развертывание
  • Структура

💻 Предварительные требования

Проверьте, что на вашем компьютере установлены следующие компоненты:

• Node.js (версия 20.x)
• yarn (версия 1.x)

🚀 Начало работы

1. Клонируйте этот репозиторий на ваш компьютер с помощью следующей команды:

$ git clone git@gitlab.webprofy.ru:templates/nuxt3.git

2. Перейдите в директорию проекта:

$ cd nuxt3

3. Установите зависимости:

$ yarn install

💡 Переменные

Перед началом разработки, вам может потребоваться установить некоторые переменные окружения.

В проекте используются следующие переменные:

Переменная	Описание	Пример
VITE_API_URL	URL backend API.	https://api.develop.kokoc.tech/graphql
VITE_URL	URL backend API.	https://develop.kokoc.tech

VITE_API_URL

Данная переменная определяет адрес, по которому приложение будет обращаться к backend-серверу. В данном случае, указан адрес https://api.develop.kokoc.tech/graphql. Вы можете изменить значение переменной, если ваш backend находится по другому адресу.

VITE_API_URL

Данная переменная определяет адрес, по которому находится приложение. В данном случае, указан адрес https://develop.kokoc.tech. Вы можете изменить значение переменной, если ваш сайт находится по другому адресу.

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

💻 Разработка

Скопируйте dev переменные

$ cp .env.example .env

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

$ yarn dev

Линтинг

Для обеспечения качества кода и коммитов в проект добавлены линтеры:

• ESLint — качество JavaScript/TypeScript кода;
• Commitlint — качество и консистентность коммитов. В качестве конфига используется стандартный конфиг @commitlint/config-conventional;

Чтобы запустить линтинг проекта, достаточно ввести команду:

$ yarn lint

Если нужно запустить линтинг с авто-исправлением ошибок:

$ yarn lint:fix

🏗️ Сборка и развертывание

Для сборки приложения для продакшн используйте следующую команду:

$ yarn build

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

$ yarn install
$ yarn build
$ yarn preview

🗂️ Структура

📁 .git-hooks                    # Функции связанные с гитом
📁 .storybook                    # Настройки storybook-а
📁 .yarn                         # Конфигурация Yarn и кеш установленных пакетов
📁 assets                        # Ресурсы, такие как изображения и стили
📁 components                    # UI компоненты
📁 graphql                       # Запросы на backend
📁 hooks                         # Кастомные хуки
📁 layouts                       # Шаблоны макетов для страниц приложения
📁 middleware                    # Промежуточные функции для обработки запросов и маршрутов
📁 pages                         # Страницы вашего приложения
📁 plugins                       # Плагины для подключения сторонних библиотек или выполнения кода перед инициализацией приложения
📁 public                        # Статические файлы, доступные напрямую из корня приложения
📁 server                        # Серверная логика
📁 stories                       # Папка с файлом с описания сторибука
📁 tests                         # Тесты
📁 types                         # Типы и интерфейсы
📁 utils                         # Вспомогательные утилиты
📄 README.md                     # Файл с описанием проекта
📄 yarn.lock                     # Файл, автоматически создаваемый при установке пакетов с помощью Yarn
📄 nuxt.config.ts                # Файл с конфигурацией nuxt