Akula Flow

Современный проект на Vue 3 с Vite и PrimeVue.

🚀 Технологии

• Vue 3 - Прогрессивный JavaScript фреймворк
• Vite - Быстрый инструмент сборки
• PrimeVue - Богатая UI библиотека с множеством компонентов
• PrimeIcons - Иконки для PrimeVue
• ESLint - Линтер для JavaScript/Vue
• Prettier - Форматтер кода

📦 Установка

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

npm install

2. Запустите проект в режиме разработки:

npm run dev

3. Откройте браузер по адресу http://localhost:3000

🛠 Доступные команды

• npm run dev - Запуск в режиме разработки
• npm run build - Сборка для продакшена
• npm run preview - Предварительный просмотр сборки
• npm run lint - Проверка и исправление кода

🔧 Glass Effect Debugger

В проект добавлен Glass Effect Debugger - мощный инструмент для разработки и отладки эффектов жидкого стекла!

⚡ Быстрый старт (1 минута)

1. Откройте src/main.js
2. Замените import App from './App.vue' на import App from './AppDebugDemo.vue'
3. Запустите npm run dev
4. Готово! 🎉

🎯 Возможности

• 📊 Мониторинг FPS, CPU, времени рендеринга
• 🎨 Управление всеми параметрами эффекта в реальном времени
• 🖼️ Загрузка пользовательских displacement карт
• 💾 Экспорт и сохранение настроек
• 🪟 Подсветка и навигация по Glass элементам

📚 Документация

• 📖 Быстрый старт - Начните за 1 минуту
• 🚀 Установка - Подробная установка
• 🎨 Возможности - Визуальный обзор
• 📝 Руководство - Полное руководство
• 📦 Сводка - Общая информация

📁 Структура проекта

akula-flow/
├── src/
│   ├── components/          # Vue компоненты
│   │   ├── ui/             # UI компоненты
│   │   │   ├── GlassContainer.vue      # Стеклянный эффект
│   │   │   ├── GlassDebugger.vue       # Дебаггер (НОВЫЙ!)
│   │   │   └── ...
│   │   ├── landing/        # Компоненты лендинга
│   │   └── GlassDebugDemo.vue          # Демо дебаггера
│   ├── App.vue             # Главный компонент (лендинг)
│   ├── AppDebugDemo.vue    # Приложение с дебаггером
│   ├── main.js             # Точка входа
│   └── style.css           # Глобальные стили
├── index.html              # HTML шаблон
├── package.json            # Зависимости и скрипты
├── vite.config.js          # Конфигурация Vite
├── QUICK_START_GLASS_DEBUGGER.md      # Быстрый старт
├── GLASS_DEBUGGER_SETUP.md            # Установка
├── GLASS_DEBUGGER_FEATURES.md         # Визуальный обзор
├── GLASS_DEBUGGER_SUMMARY.md          # Сводка
└── README.md               # Документация

🎨 PrimeVue

Проект настроен для работы с PrimeVue - богатой UI библиотекой с множеством компонентов. В проекте уже подключены:

• Компоненты: Card, Button, InputText, Dropdown, Checkbox
• Иконки: PrimeIcons с множеством иконок
• Темы: Saga Blue тема (легко заменить на другие)
• Адаптивность: Все компоненты адаптивные
• Accessibility: Полная поддержка доступности

🔧 Настройка

Добавление новых компонентов

1. Создайте файл в папке src/components/
2. Импортируйте компонент в нужном месте
3. Используйте Composition API с <script setup>

Настройка PrimeVue

Все компоненты PrimeVue доступны для импорта:

import Button from 'primevue/button'
import Card from 'primevue/card'
import InputText from 'primevue/inputtext'

Смена темы

Для смены темы измените импорт в src/main.js:

// Вместо saga-blue можно использовать:
// 'primevue/resources/themes/aura-light-green/theme.css'
// 'primevue/resources/themes/aura-light-blue/theme.css'
// 'primevue/resources/themes/aura-light-purple/theme.css'

Стилизация

• Глобальные стили в src/style.css
• Стили компонентов в <style scoped>
• Используйте CSS Grid и Flexbox для макета

📝 Разработка

1. Следуйте конвенциям Vue 3 Composition API
2. Используйте TypeScript для типизации (опционально)
3. Следуйте правилам ESLint
4. Форматируйте код с помощью Prettier

🚀 Деплой

Для деплоя выполните:

npm run build

Собранные файлы будут в папке dist/

📚 Полезные ссылки

• Vue 3 Documentation
• Vite Documentation
• PrimeVue Documentation
• PrimeVue Components
• PrimeIcons
• PrimeVue Themes
• Vue 3 Composition API

🤝 Вклад в проект

1. Форкните репозиторий
2. Создайте ветку для новой функции
3. Внесите изменения
4. Создайте Pull Request

---

Создано с ❤️ для современной веб-разработки