vue dash

VueDash (plantilla de panel de administración CSS de Vue Nuxt.js 3 Tailwind)

Una plantilla de panel de administración moderna, responsiva y personalizable creada con Vue.js , Nuxt.js 3 , NuxtUI y Tailwind CSS . Esta plantilla es perfecta para crear potentes interfaces de administración, paneles y aplicaciones web con un diseño limpio y minimalista.

Características

• Nuxt.js 3 : Representación fluida del lado del servidor (SSR) y generación de sitios estáticos (SSG) con API de composición Vue 3.
• Tailwind CSS : marco CSS de utilidad para un desarrollo de interfaz de usuario rápido y receptivo.
• Gestión de listas de tareas pendientes : soporte integrado para la gestión de listas de tareas pendientes CRUD
• Invoice Maker : soporte integrado para CRUD, creador de facturas interactivo
• Componentes reutilizables : componentes de interfaz de usuario modulares y reutilizables para una fácil personalización.
• Modo oscuro : soporte integrado para temas claros y oscuros.
• Diseño responsivo : Totalmente optimizado para todos los tamaños de pantalla.
• Enrutamiento dinámico : sistema de enrutamiento flexible impulsado por Nuxt.js.
• Ampliable : fácil de agregar nuevas páginas, componentes y complementos.

? Pila de tecnología

• Marco frontend : Vue.js 3 (API de composición)
• Meta marco : Nuxt.js 3
• Estilo : CSS viento de cola
• Biblioteca de componentes de UI : NextUI
• Administrador de paquetes : pnpm

Instalación

1. Clonar el repositorio :

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

2. Instalar dependencias :

   pnpm install
   # or
   npm install

3. Ejecute el servidor de desarrollo :

   pnpm run dev
   # or
   npm run dev

4. Abra su navegador y navegue hasta http://localhost:3000 .

---

Estructura de archivos

 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

? Documentación de rutas y páginas

Ruta	Nombre de la página	Descripción
/	Página principal	La página de inicio principal del panel de administración.
/login	Página de inicio de sesión	Permite a los usuarios iniciar sesión para acceder al panel de administración.
/register	Página de registro	Permite a nuevos usuarios crear una cuenta.
/contact	Página de contacto	Muestra un formulario para que los usuarios soliciten asistencia o consultas.
/invoice	Página de factura	Muestra una lista de facturas o detalles de registros financieros.
/todo	Página de la aplicación Todo	Una página para administrar y rastrear tareas en formato de lista de tareas pendientes.
/products	Página de productos	Una página para gestionar la información del producto, incluidos detalles y precios.
/order-lists	Página de listas de pedidos	Enumera todos los pedidos de los clientes con opciones para verlos y administrarlos.
/product-stock	Página de existencias de productos	Muestra los niveles de existencias actuales y las opciones de gestión de inventario.
/settings	Página de configuración	Permite a los usuarios administrar la configuración del sistema y las preferencias personales.
/team	Página del equipo	Muestra opciones de administración de permisos, roles y miembros del equipo.

? Personalización

CSS de viento de cola

Modifique el archivo tailwind.config.js para personalizar temas, ampliar estilos o agregar complementos.

Componentes

Todos los componentes están en el directorio components/ dentro del directorio features/(domain)/ . Cree nuevos componentes o amplíe los existentes para satisfacer las necesidades de su proyecto.

Páginas y enrutamiento

Agregue o edite archivos en el directorio pages/ para crear nuevas rutas dinámicamente.

? Dependencias

• Vista 3
• Nuxt.js 3
• CSS de viento de cola
• NuxtUI

Documentación

Configurar la autenticación

Puede integrar cualquier servicio de autenticación (por ejemplo, Firebase, Auth0 o JWT personalizado) utilizando el middleware y los complementos de Nuxt. Consulte el módulo de autenticación de Nuxt.js para obtener más detalles.

Agregar integraciones API

Utilice las rutas del servidor de Nuxt o las llamadas API externas en los directorios pages/ o composables/ . Obtenga más información sobre el manejo de la API de Nuxt.js aquí.

? Pruebas

Pruebas unitarias

Instale y configure Vitest para realizar pruebas unitarias de sus componentes Vue.

Pruebas de extremo a extremo

Utilice Cypress o Playwright para realizar pruebas de un extremo a otro.

Despliegue

1. Generación de sitios estáticos (SSG) :

   pnpm run generate

   Implemente los archivos generados desde la carpeta dist/ en un proveedor de alojamiento estático (por ejemplo, Netlify, Vercel).

2. Representación del lado del servidor (SSR) :

   pnpm run build
   pnpm run start

   Implemente la aplicación en el alojamiento Node.js (por ejemplo, AWS, Heroku o DigitalOcean).

? Apoyo

Si tiene algún problema, tiene preguntas o desea solicitar nuevas funciones o páginas, no dude en abrir un problema o comunicarse con [email protected].

? Contribuciones

¡Las contribuciones son bienvenidas! Siga estos pasos:

1. Bifurca el repositorio.
2. Cree una rama de funciones ( git checkout -b feature-name ).
3. Confirme sus cambios ( git commit -m "Add feature" ).
4. Empuje a la rama ( git push origin feature-name ).
5. Abra una solicitud de extracción.

Licencia

Este proyecto está bajo la licencia MIT.

? Expresiones de gratitud

• Vue.js
• Nuxt.js
• NuxtUI
• CSS de viento de cola

Vista previa de página

Vista de escritorio

Vista de tableta

Vista móvil