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.