vue dash

VueDash (Шаблон панели администратора Vue Nuxt.js 3 Tailwind CSS)

Современный, адаптивный и настраиваемый шаблон панели администратора, созданный с помощью Vue.js , Nuxt.js 3 , NuxtUI и Tailwind CSS . Этот шаблон идеально подходит для создания мощных интерфейсов администратора, информационных панелей и веб-приложений с чистым и минималистичным дизайном.

Функции

• Nuxt.js 3 : бесшовный рендеринг на стороне сервера (SSR) и генерация статического сайта (SSG) с API композиции Vue 3.
• Tailwind CSS : многофункциональная CSS-платформа для быстрой и гибкой разработки пользовательского интерфейса.
• Управление списками дел : встроенная поддержка управления списками дел CRUD.
• Invoice Maker : встроенная поддержка CRUD, интерактивного генератора счетов.
• Многоразовые компоненты : модульные и повторно используемые компоненты пользовательского интерфейса для легкой настройки.
• Темный режим : встроенная поддержка светлых и темных тем.
• Адаптивный дизайн : полностью оптимизирован для всех размеров экрана.
• Динамическая маршрутизация : гибкая система маршрутизации на базе Nuxt.js.
• Расширяемый : легко добавлять новые страницы, компоненты и плагины.

? Технический стек

• Frontend Framework : Vue.js 3 (API композиции)
• Метафреймворк : Nuxt.js 3
• Стиль : CSS Tailwind.
• Библиотека компонентов пользовательского интерфейса : NextUI
• Менеджер пакетов : pnpm

Установка

1. Клонируем репозиторий :

   git clone https://github.com/Kei-K23/vue-dash
   cd vue-dash

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

   pnpm install
   # or
   npm install

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

   pnpm run dev
   # or
   npm run dev

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

---

Структура файла

 admin-dashboard-template/
├── layouts/           # Layouts for the app
├── pages/             # Nuxt.js pages and routes
├── features/          # Organize logic, ui components and state into domain or feature
├── public/            # Static assets
├── nuxt.config.ts     # Nuxt.js configuration
└── tailwind.config.js # Tailwind CSS configuration

? Документация по маршрутам и страницам

Маршрут	Название страницы	Описание
/	Главная страница	Основная целевая страница панели администратора.
/login	Страница входа	Позволяет пользователям входить в систему для доступа к панели администратора.
/register	Страница регистрации	Позволяет новым пользователям создавать учетную запись.
/contact	Контактная страница	Отображает форму, позволяющую пользователям обратиться за поддержкой или задать вопросы.
/invoice	Страница счета	Отображает список счетов-фактур или подробную информацию о финансовых отчетах.
/todo	Страница приложения Todo	Страница для управления и отслеживания задач в формате списка дел.
/products	Страница продуктов	Страница для управления информацией о продукте, включая сведения и цены.
/order-lists	Страница списков заказов	Перечисляет все заказы клиентов с возможностью просмотра и управления ими.
/product-stock	Страница запаса продукта	Отображает текущие уровни запасов и варианты управления запасами.
/settings	Страница настроек	Позволяет пользователям управлять настройками системы и личными предпочтениями.
/team	Страница команды	Демонстрирует членов команды, роли и параметры управления разрешениями.

? Кастомизация

CSS попутного ветра

Измените файл tailwind.config.js , чтобы настроить темы, расширить стили или добавить плагины.

Компоненты

Все компоненты находятся в components/ внутри каталога features/(domain)/ . Создавайте новые компоненты или расширяйте существующие в соответствии с потребностями вашего проекта.

Страницы и маршрутизация

Добавляйте или редактируйте файлы в каталоге pages/ для динамического создания новых маршрутов.

? Зависимости

• Вю 3
• Nuxt.js 3
• CSS попутного ветра
• NuxtUI

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

Настройка аутентификации

Вы можете интегрировать любую службу аутентификации (например, Firebase, Auth0 или собственный JWT), используя промежуточное программное обеспечение и плагины Nuxt. Дополнительные сведения см. в модуле аутентификации Nuxt.js.

Добавление интеграции API

Используйте маршруты сервера Nuxt или внешние вызовы API в каталогах pages/ или composables/ . Узнайте больше об обработке API Nuxt.js здесь.

? Тестирование

Модульное тестирование

Установите и настройте Vitest для модульного тестирования ваших компонентов Vue.

Сквозное тестирование

Используйте Cypress или Playwright для сквозного тестирования.

Развертывание

1. Генерация статического сайта (SSG) :

   pnpm run generate

   Разверните сгенерированные файлы из папки dist/ у статического хостинг-провайдера (например, Netlify, Vercel).

2. Серверный рендеринг (SSR) :

   pnpm run build
   pnpm run start

   Разверните приложение на хостинге Node.js (например, AWS, Heroku или DigitalOcean).

? Поддерживать

Если у вас возникнут какие-либо проблемы, есть вопросы или вы хотите запросить новые функции или страницы, смело открывайте проблему или обращайтесь по адресу [email protected].

? Взносы

Вклады приветствуются! Пожалуйста, выполните следующие действия:

1. Форкните репозиторий.
2. Создайте ветку функции ( git checkout -b feature-name ).
3. Зафиксируйте изменения ( git commit -m "Add feature" ).
4. Отправьте сообщение в ветку ( git push origin feature-name ).
5. Откройте запрос на вытягивание.

Лицензия

Этот проект лицензируется по лицензии MIT.

? Благодарности

• Vue.js
• Nuxt.js
• NuxtUI
• CSS попутного ветра

Предварительный просмотр страницы

Просмотр рабочего стола

Вид планшета

Мобильная версия