Envíanos tu consulta

Buscar cursos

Catálogo 2024

¡Últimas plazas!Cursos Servicios FUNDAE Plataforma LMS

Solicitar información

Buscar cursos

Solicitar información

Cursos/Cursos de Desarrollo Web/Curso VueJS con Vue Storefront

Curso completo de VueJS con Vue Storefront

DISPONIBLE EN MODALIDAD:

Aula Virtual Personalizada

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.

Formación en VueJS con Vue Storefront bonificable para empresas

¿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 1

Introducció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 2

Interacció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 3

Componentes

¿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 4

Renderizado 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 5

La 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 6

Uso 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 7

Instancias 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 8

Manejo 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 9

Directivas

¿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 10

Filtros 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 11

Animaciones 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 12

Peticiones 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 13

Routing 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 14

Autenticació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 15

Responsive 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 16

Estado 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 17

Webpack

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 18

Builds 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 19

Vue Storefront

Introducción
Instalación
Estructura del proyecto
Aplicando configuraciones iniciales
Enrutamiento y temas
Vue Storefront Logger

tema 20

Composables

Qué son
Extrayendo datos mediante getters
Gestión de errores
Extendiendo consultas de GraphQL
Composables personalizados

tema 21

Arquitectura

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 22

Optimizando 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 23

Storefront UI

Instalación
Integración con Tailwind CSS
Átomos
Moléculas
Organismos
Plantillas
Páginas
Transiciones

Testimonios de nuestros clientes

“Empecé a formarme recientemente con ellos y estoy muy sorprendido de la metodología y la calidad de los contenidos. He hecho varios cursos online con otros proveedores pero con ninguno he terminado tan satisfecho como con Imagina.”

“Mi empresa contrató un Aula Virtual Personalizada con Imagina, después de tener malas experiencias con otras academias y nos sorprendió la profesionalidad con la que trabajan. Hicimos 3 reuniones técnicas con Martín antes de empezar la formación y quedamos encantados con el resultado, sin duda repetiremos.”

Curso de VueJS con Vue Storefront bonificado 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

Contáctanos

¿Qué formación necesitas?

En Imagina llevamos más de 14 años ofreciendo formación para empresas, estamos especializados en el área técnica y de ofimática, adaptando nuestras formaciones a vuestras necesidades. Déjanos tus datos, y nos pondremos en contacto contigo para informarte sobre el curso que mejor se ajuste a lo que buscas. Cuéntanos tus necesidades y podremos asesorarte sobre la modalidad que mejor se adapte: Curso Online o Aula Virtual Personalizada