Pokedex en VueJS desde cero

VueJS es un framework JavaScript muy vers谩til, sencillo de emplear, y con una gran comunidad que colabora d铆a a d铆a en mejorarlo. Hoy te traigo un breve tutorial sobre c贸mo empezar a programar un pokedex en VueJS desde cero.

Debido a lo sencillo que 茅s, el c贸digo entero se encuentra en el gist al final de este post, y la explicaci贸n del mismo se encuentra intradocumentada. Exploraremos directivas b谩sicas de VueJS para renderizar componentes HTML de manera din谩mica.

De igual manera, exploraremos nociones b谩sicas de reactividad de VueJS, o lo que es lo mismo, que la interfaz se adapte de manera autom谩tica a los cambios que sucedan en estructuras de datos tales como variables, objetos y arreglos en la secci贸n javascript.

Instalaci贸n de paquetes y librer铆as necesarias

  1. Para proceder a ejecutarlo, es necesario tener instalado node en tu computador. Node te permitir谩 instalar posteriormente los paquetes necesarios mediante el gestor de paquetes npm.
  2. Una vez instalado, ejecuta un nuevo terminal y escribe el comando para instalar el cliente de VueJS (vue cli) que necesitar谩s para crear proyectos nuevos y ejecutar tu aplicaci贸n de modo local.
  3. Una vez instalado, crea el proyecto Pokedex en el directorio de tu preferencia. Un asistente te guiar谩 durante el proceso e indicar谩 cuando el directorio est茅 listo. Procura elegir compatibilidad con Vue 3 y Javascript. Si forzas que sea Typescript, no te servir谩 el Gist que se comparte mas adelante.
  4. Finalmente, modifica el archivo App.vue, podr谩s borrar todo su contenido, y reemplazarlo por el Gist compartido mas abajo.
  5. Finalmente, ejecuta tu pokedex de manera local empleando el comando npm run.
# Instala el cliente de Vue para crear 
# y ejecutar aplicaciones de manera local

npm install -g @vue/cli

# Crea un proyecto llamado pokedex en 
# el directorio que prefieras

vue create pokedex

# Tras reemplazar el archivo App.vue por el
# Gist compartido mas abajo, ejecuta npm run
# para probar la aplicaci贸n en modo local

npm run serve

C贸digo fuente para programar tu Pokedex en VueJS desde cero

A continuaci贸n lee con detenimiento la documentaci贸n del gist compartido donde se encuentra el c贸digo para ejecutar tu pokedex en VueJS desde cero y comenzar a entender el funcionamiento de VueJS

Si te ha gustado, no dejes de comentar y compartirlo. Esto motiva a seguir creando mas contenido y en espa帽ol para tu aprovechamiento.

Informaci贸n: Pokedex y Pokemon son marcas registradas de Nintendo.

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada.