Vue intermedio: más allá de lo esencial

Ahora que dominas las características esenciales y los componentes en Vue, ha llegado el momento de dar el siguiente paso en tu aprendizaje. En esta serie de vídeos vamos a explorar nuevas funciones Vue que harán de puente a conceptos más avanzados. Algunos de estos conceptos incluyen.

Vue CLI.
Single File Components.
Componentes globales.
Mixins.
Servicios.
Vue router.
Vuex.
Etc.

Armado/a con este conocimiento, podremos adentrarnos en otras series sobre conceptos de Vue más anvanzados.

Ver en Hoja de Ruta

Intermedio Vue

Repositorio de la serie

Vue CLI

Vue tiene su propio interfaz de línea de comando. Se trata de una herramienta indispensable en cualquier proyecto intermedio o avanzando con Vue.

Vue UI

Si los comandos y el terminal no son lo tuyo, no te preocupes, ahora Vue CLI incluye un modo gráfico llamado Vue UI que permite realizar las mismas tareas.

Vue CLI: recorrido del proyecto

Vamos a recorrer juntos la estructura de un proyecto tipo Vue CLI para aprender para qué sirve cada archivo y directorio a tu disposición.

Vue Single File Components intro

Los SFC son los ladrillos de una App Vue (creada con CLI) y combinan estructura, lógica y estilo en un único archivo.

Lógica en Single File Components

Sigamos aprendiendo a manejar los Single File Components. En esta ocasión utilizaremos la lógica que ya conocemos a la hora de crear componentes Vue.

CSS en Single File Components Vue

Veamos cómo utilizar CSS en nuestros Single File Components procesados por Vue CLI. De paso, aprenderemos como auto-importar variables y mixins SASS.

Auto-importar componentes Vue

De igual forma que con nuestro código CSS, también podemos auto-importar Single File Components Vue de forma automática.

Servicios y repositorios

En la mayoría de Apps hay al menos una llamada a una API. Si queremos poder re-utilizar y mantener de forma óptima esas llamadas con un servicio centralizado.

Qué son los mixins Vue

Los mixins Vue sirven para encapsular funcionalidad que pueda ser re-utilizada en varios componentes (o todos ellos). De ahí su nombre (mix in: combinar).

Enrutador personalizado

Como paso previo para entender cómo funciona y para qué sirve Vue Router, vamos a crear un pequeño enrutador de forma artesanal.

Introducción a Vue Router

Vamos a aprender a utilizar Vue Router revisando sus funciones y características principales para que puedas incorporarlo ya a tus aplicaciones SPA Vue.

Manejo de estado en Vue

Para entender el concepto de "state management" en Vue, vamos a aplicar varias técnicas de manejo de estado global, de más sencillas a más elaboradas.

Introducción a Vuex

En el ecosistema Vue, la librería de manejo de estado oficial se llama Vuex y se inspira en el patrón de diseño Flux creado por Facebook. Veamos cómo funciona.