Introducción
- ¿Qué vamos a hacer?
Aprendiendo las bases de Vuejs 2 paso a paso
- Archivos de la sección
- Instalar dependencias
- Entendiendo Vuejs 2
- IDE's y editores de texto recomendados
- Hola Mundo
- Nuestro primer componente
- Computed Properties
- Métodos
- Data Binding con v-model
- Data Binding con v-model utilizando Arrays
- Emitir eventos a componentes padres con $emit
- Acceso a datos del componente padre
- Acceso a datos del componente hijo utilizando referencias
- Ejecutar métodos del componente hijo utilizando referencias
- Introducción a los formularios, ejemplo básico de login
- Bucles con la directiva v-for
- Condicionales con la directiva v-if
- Slots, definiendo secciones para poder sobrescribir, ejemplo de Layout
- Watchers, haciendo cosas cuando algún dato cambie, peticiones HTTP GET con Fetch
- Computed Properties con getters y setters
- Carga de componentes dinámicos con el componente component
- Mixins, añadiendo funcionalidad extra a nuestros componentes
- Desarrollar nuestra primera directiva, dando el foco a inputs
- Directiva para aplicar estilos a componentes pasando parámetros
- Desarrollar un filtro con paso de parámetros para establecer la Currency
- Desarrollar un plugin con argumentos para mostrar el perfil de un usuario
- Props, paso de datos a componentes al utilizarlo, tipos y validación
- Props VS Data y reactividad
Aplicación de contador con Vuejs 2 + Vuex + Vue Cli 3
- Archivos de la sección
- Instalar Vue Cli 3 y crear nuestro primer proyecto con Vue UI
- Entendiendo un proyecto creado con Vue Cli
- Introducción a Vuex
- Definir la tienda de datos con Vuex, state y mutations
- Crear el componente Counter y ver cómo lo podemos utilizar en otros componentes
- Primera versión del componente Counter accediendo a Vuex
- Segunda versión componente Counter, mapState y mapMutations
Desarrollando un listado de productos con un carrito de compras
- Archivos de la sección
- Crear proyecto con Vue UI
- Instalar VuePaginate, BootstrapVue y configurar ambas dependencias cómo plugins
- Iniciar un módulo con Vuex para manejar los productos de la aplicación
- Acciones del módulo Products haciendo petición HTTP con Async y Await
- Definir la lógica del listado de productos
- Primera versión del listado de productos paginados con Bootstrap 4
- Crear componente que representa un producto y utilizarlo en un bucle v-for
- Componente con Slots para definir un Layout para nuestra tienda
- Iniciar el módulo Vuex del carrito de compras y desarrollar mutaciones
- Crear un Getter con Vuex en el módulo Cart para calcular el coste total
- Añadir productos al carrito con Vuex desde el listado de productos
- Iniciar componente Carrito y definir la lógica
- Finalizar componente Cart, trabajo en la template con b-table
CRUD con JSON SERVER, consumir API con Vuex + Router
- Archivos de la sección
- Crear y levantar servidor Fake con JSON SERVER
- Crear proyecto con Vue UI, instalar Axios, VueAxios, BootstrapVue y Vuelidate
- Explicación del proyecto y el Router de Vuejs
- Desarrollar plugins para utilizar las dependencias instaladas
- Iniciar módulo Todos, definir estado, getters y mutaciones
- Consumir la API utilizando VueAxios a través de Acciones con Vuex
- Finalizar Acciones para consumir la API y pasar el módulo Todos a la Store
- Vistas, rutas y modificar el componente APP con la nueva navegación
- Iniciar el componente TodoList para listar tareas
- Iniciar componente TodoItem y escribir la lógica necesaria
- Finalizar componente TodoItem, escribir la template y utilizar en TodoList
- Finalizar la vista de Todos con botones de Acción
- Desarrollar lógica del Componente TodoForm
- Desarrollar template del Componente TodoForm con Vuelidate
- Alta de todos utilizando el Componente TodoForm
- Actualizar todos utilizando el Componente TodoForm
Persistir el carrito de nuestra tienda en LocalStorage o IndexedDB
- Archivos de la sección
- Persistir Vuex en LocalStorage
- Persistir Vuex en IndexedDB, ideal para PWA's
Poner aplicación tienda en producción con Amazon Web Services
- Información importante: Configuración CORS Cloudfront S3 y Política Bucket
- Solucionar problema política bucket público en S3
- Poner la aplicación en Producción en un Bucket de Amazon S3
- Utilizar CloudFront con Bucket de S3 para añadir certificado HTTPS
Autenticación, Eventos Router y Validación de formularios con VeeValidate
- Archivos de la sección
- ¿Qué vamos a hacer?
- Crear proyecto e instalar dependencias a utilizar
- Middleware JSON SERVER para iniciar sesión
- Configurar plugins VeeValidate, VuexPersist y Bootstrap Vue
- Iniciar módulo de autenticación, estado y mutaciones
- Acción para iniciar sesión con Vuex
- Lógica para añadir un preloader al iniciar sesión
- Desarrollar navegaciones para invitados y usuarios identificados
- Utilizar navegaciones para invitados y usuarios identificados en App
- Configurar preloader en App
- Iniciar componente formulario de login con paso y validación de props
- Finalizar componente formulario de login, template
- Crear View Login y utilizar componente login form
- Crear mixin para mostrar errores de formulario con VeeValidate y BootstrapVue
- Extender VeeValidate con validación para fortaleza de password
- Procesar formulario de login y persistir módulo Auth en localStorage
