Envíanos tu consulta
Términos y condiciones *
logoImagina
iconoCurso

Curso de VueJS con Vue Storefront

DISPONIBLE EN MODALIDAD:
Aprende a utilizar uno de los frameworks para el desarrollo web más populares del momento y combínalo con Vue Storefront para crear aplicaciones de eCommerce muy potentes y eficientes.
iconClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClient
Aprende VueJS con Vue Storefront: Curso completo
¿A quién va dirigido?
A todo programador que quiera conocer este framework y aprender a desarrollar aplicaciones de eCommerce con VueJS y Vue Storefront.
Objetivos
  • Aprender a desarrollar aplicaciones Vue con Typescript
  • Aprender a gestionar componentes y realizar aplicaciones mantenibles y extensibles
  • Aprender a gestionar builds y configuraciones para entornos de producción
  • Aprovechar todos los recursos que nos ofrece Vue Storefront para crear un sitio de eCommerce optimizado y potente
¿Qué vas a aprender?

Aprende a utilizar uno de los frameworks para el desarrollo web más populares del momento y combínalo con Vue Storefront para crear aplicaciones de eCommerce muy potentes y eficientes.

Requisitos
  • Conocimientos previos en JavaScript, HTML y CSS
  • Recomendable conocimientos base en TypeScript
  • Tener instalados previamente en el equipo: Node LTS, NPM, Visual Studio Code, Git y Docker Desktop
  • Son necesarios permisos de instalación y administración en el equipo
  • En necesario disponer de una licencia activa de Vue Storefront
Temario del curso
tema 1Introducción a VueJS
  • ¿Qué es VueJS?
  • ¿Qué es Vue CLI?
  • Usando Vue Cli para crear proyectos
  • Creando el primer proyecto Vue con Typescript
  • Plantillas de proyectos con Vue CLI
  • Configuración de Vue localmente
tema 2Interacción con el DOM
  • Las plantillas de VueJS
  • Instancias y sintaxis de las plantillas de VueJS
  • Gestión de datos y binding
  • ¿Qué son las directivas y cómo se usan?
  • El Re-renderizado
  • Eventos: Objetos, datos y modificadores
  • Los eventos de teclado
  • Uso de código en las plantillas
  • El binding doble
  • Las propiedades y la reacción ante los cambios
  • La escucha activa ante cambios
  • Uso de clases CSS para dar estilos de manera dinámica
tema 3Componentes
  • ¿Qué es un componente?
  • Almacenando datos en componentes
  • Registrando componentes
  • El componente raíz (root)
  • Ciclo de vida de un componente
  • Creando componentes
  • Usando componentes
  • Buenas prácticas de estructuración del proyecto
  • Estructuras de carpetas alternativas
  • ¿Cómo se nombran los componentes?
  • Dando estilos a los componentes
  • Depuración de un proyecto VueJS
tema 4Renderizado condicional y bucles
  • El renderizado condicional con v-if
  • Alternativas a v-if
  • Renderizado con bucles v-for
  • Alternativas a v-for
  • Bucles sobre objetos literales
  • Bucles sobre listas
tema 5La comunicación entre componentes
  • El problema de la comunicación entre componentes
  • Las Props como método de comunicación vertical descendente
  • Nombrado de Props
  • Uso de Props en componentes hijo
  • Validando las Props de un componente
  • Los eventos como método de comunicación vertical ascendente
  • Comprendiendo el flujo unidireccional del flujo de datos
  • Funciones Callback como método de comunicación
  • Bus de eventos
tema 6Uso avanzado de componentes
  • El paso de contenido
  • Paso de contenido a través las funciones de composición
  • ¿Qué son las funciones de composición?
  • La importancia de reutilizar código
tema 7Instancias de VueJS
  • Conceptos básicos de la instancia de VueJS
  • Uso de múltiples instancias
  • Accediendo a la instancia de VueJS
  • Uso de datos y métodos con VueJS
  • $el
  • $data
  • $refs
  • Uso de $refs en las plantillas
  • La API de VueJS
  • Montando una plantilla
  • Uso de componentes
  • Limitaciones de determinadas plantillas
  • Actualización del DOM por parte de VueJS
  • El ciclo de vida de VueJS
tema 8Manejo de Formularios
  • Binding en campos de tipo input
  • Agrupando datos
  • Pre-Poblando los inputs de un formulario
  • Modificadores de inputs
  • Binding de un textarea y guardado de saltos de línea
  • Uso de checkboxes y almacenamiento de datos en arrays
  • Uso de radio buttons
  • Uso de desplegables
  • ¿Qué es el v-model y para qué sirve?
  • Creando un Custom Control
  • Enviando un formulario
tema 9Directivas
  • ¿Qué son las directivas?
  • ¿Cómo funcionan las directivas?
  • Introducción a funciones Hook
  • Creando una directiva
  • Pasando valores a directivas personalizadas
  • Pasando argumentos a directivas personalizadas
  • Modificando directivas personalizadas
  • Registrando directivas
  • Usando múltiples modificadores
  • Pasando valores complejos a directivas
tema 10Filtros y Mixins
  • ¿Qué es un filtro?
  • Creando un filtro
  • Filtros globales
  • Encadenado de múltiples filtros
  • Filtros vs Propiedades
  • ¿Qué son los mixins?
  • Creando un mixin
  • Usando un mixin
  • Creando mixin globales
  • Los mixins y el ámbito
tema 11Animaciones y Transiciones
  • ¿Qué es una transición?
  • Preparando el código para usar transiciones
  • Montando una transición
  • Accediendo a clases CSS para transiciones
  • Creando una transición “fade”
  • Creando una transición “slide”
  • Propiedades para transiciones y animaciones con mixins
  • Animaciones v-if y v-show
  • Usando una animación inicial
  • Uso de clases CSS diversas
  • Uso de nombres y atributos dinámicos
  • Transiciones entre múltiples elementos
  • Escucha activa ante eventos de transición con Hooks
  • Entendiendo las animaciones en TypeScript
  • Exclusión de CSS de una animación
  • Creando una animación en TypeScript
  • Animando componentes dinámicos
  • Uso de “transition-group” para animación de listas
  • Añadiendo animaciones
tema 12Peticiones HTTP
  • Configuración de “vue-resource”
  • Peticiones HTTP
  • Interceptando Peticiones
  • Interceptando Respuestas
  • ¿Qué es un “resource”?
  • Creación de recursos personalizados
  • Recursos vs Peticiones HTTP tradicionales
  • Comprendiendo plantillas URL
  • Introducción a Axios
  • Configuración del proyecto
  • Configuración de Axios a nivel del proyecto
  • Envío de peticiones HTTP con Axios
  • Accediendo a las respuestas y su contenido
  • Configuración global para las peticiones de Axios
  • Uso de interceptores en Axios
  • Instancias personalizadas de Axios
tema 13Routing en VueJS
  • ¿Qué es “vue-router” y por qué es necesario?
  • Configuración de “vue-router”
  • Configurando y cargando rutas
  • Modos de enrutado: Hash vs Historial
  • Router Links
  • Active Links y estilo
  • Navegación imperativa
  • Configurando parámetros para las rutas
  • Obteniendo parámetros de las rutas
  • Usando parámetros de las rutas
  • Reaccionando ante cambios en los parámetros de las rutas
  • Nested Routing – Child Routes
  • Navegando a las rutas “child”
  • Dinamizando los Router Links
  • Named Routes
  • Usando parámetros Query
  • Named Router Views
  • Redireccionamiento
  • Transiciones entre rutas
  • Pasando fragmentos Hash
  • Controlando el comportamiento de Scroll
  • Router Guards
  • “beforeEnter” Guards
  • “beforeLeave” Guards
  • Carga “lazy” de las rutas
tema 14Autenticación
  • La autenticación en SPAs
  • Configuración del proyecto
  • Añadiendo un registro
  • Añadiendo un login
  • Uso de “Vuex” para el envío de peticiones de autenticación
  • Almacenando datos de autenticación en Vuex
  • Autenticación con JWT
  • Accediendo a otros recursos de Vuex
  • Enviando el Token al Backend
  • Auth Guards
  • Actualizando el estado de la aplicación
  • Añadiendo un logout
  • Auto login y Auto logout
tema 15Responsive Frameworks
  • Introducción a Responsive Frameworks
  • Viewport
  • Densidades de pantalla
  • Diseños líquidos
  • Ritmo Vertical
  • Media Queries
  • Introducción a Bootstrap
  • Características de Bootstrap
  • Paso a Paso para empezar con Bootstrap
  • Añadiendo Bootstrap a un proyecto VueJS
  • El Container de Bootstrap
  • Responsive Breakpoints de Bootstrap
  • Z-Index en Bootstrap
  • El sistema de Grid de Bootstrap
  • La tipografía en Bootstrap
  • Las listas en Bootstrap
  • Las tablas en Bootstrap
  • Las imágenes en Bootstrap
  • Las figuras en Bootstrap
  • Otras utilidades de Bootstrap
  • Los componentes de Bootstrap
  • ¿Qué es el Material Design?
  • Vuetify como Responsive Framework alternativo a Bootstrap
  • ¿Por qué Vuetify es una buena opción?
  • El Generador de Temas de Vuetify
  • Instalación
  • El Grid de Vuetify
  • Los Layouts de Vuetify
  • Elevation en Vuetify
tema 16Estado de la aplicación
  • El problema del manejo del estado de la aplicación
  • El concepto de estado centralizado
  • Comprendiendo los getters
  • Mapeo de getters y propiedades
  • Las mutaciones y el asincronismo
  • Comprendiendo las Acciones
  • Mapeo de acciones y funciones
  • El binding doble (v-model) y Vuex
  • Más buenas prácticas de estructuración de proyectos
  • Uso de namespaces
tema 17Webpack
  • Entendiendo Webpack y la estructura de carpetas
  • El entorno de producción y cómo realizar una build
  • Configuraciones en Webpack y buenas prácticas
tema 18Builds y despliegue
  • Gestión de builds con scripts de npm
  • Gestión y uso de variables de entorno en archivos .env
  • Analizando y desplegando la build de producción localmente
  • Despliegue en Netlify
tema 19Vue Storefront
  • Introducción
  • Instalación
  • Estructura del proyecto
  • Aplicando configuraciones iniciales
  • Enrutamiento y temas
  • Vue Storefront Logger
tema 20Composables
  • Qué son
  • Extrayendo datos mediante getters
  • Gestión de errores
  • Extendiendo consultas de GraphQL
  • Composables personalizados
tema 21Arquitectura
  • Navegación
  • Contexto de la aplicación
  • Repasando la configuración del Middleware
  • Creando y extendiendo una integración
  • Separando el servidor del middleware de Nuxt.js
tema 22Optimizando Vue Storefront
  • Web Vitals
  • Mejorando de cara a Web Vitals
  • Optimizando el HTML y CSS
  • Optimización en las imágenes con @nuxt/image
  • Optimizando el JavaScript
  • Server Side Rendering Cache
  • Seguridad en las cabeceras HTTP
  • Buenas prácticas
tema 23Storefront UI
  • Instalación
  • Integración con Tailwind CSS
  • Átomos
  • Moléculas
  • Organismos
  • Plantillas
  • Páginas
  • Transiciones

Formación Bonificada para Empresas a través de FUNDAE

Somos entidad organizadora de FUNDAE, todas nuestras formaciones se pueden bonificar hasta el 100%, sujeto a vuestro crédito disponible y a cumplir con todos los requisitos de realización establecidos por la Fundación Estatal para el Empleo.

 

Si desconoces el funcionamiento de las bonificaciones, ofrecemos el servicio de gestión en FUNDAE, consúltanos cualquier duda que te surja.

Descargar Guía FUNDAE
imagenFundae
iconClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClient