Como Crear un Buscador en Tiempo Real con Vue JS 2.6.11 (Buscador de Pokemones) – Parte 2 (Final)

Vue JS | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

En la parte anterior de este tutorial llamada Como Crear un Buscador en Tiempo Real con Vue JS 2.6.11 (Buscador de Pokemones) – Parte 1 comenzamos creando un nuevo proyecto en Vue JS, pasos seguido creamos el componente Pokemones y dentro de el creamos su vista HTML y su código Vue JS respectivo, en esta parte 2 y última, terminaremos de crear el proyecto, vamos con ello.

Partes

  • Parte 1
  • Parte 2 (Final – Código fuente en GitHub)


Antes de continuar, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Herramientas Online Para El Trabajo En Equipo”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Crear un Buscador en Tiempo Real con Vue JS 2.6.11 (Buscador de Pokemones) – Parte 2 (Final).

Componente Principal (App)

Ahora abrimos el componente App que Vue JS nos creo cuando realizamos la creación del nuevo proyecto, este archivo se encuentra en buscador-tiempo-real-vuejs > src > App.vue

En el archivo App.vue muestro o imprimo el componente Pokemones dentro de <template></template>

Y dentro de las etiquetas <script></script> hago la importación del componente Pokemones.

A continuación, el código completo del componente App.

Bien con esto ya tenemos creado el proyecto, ahora pasemos a publicarlo.

Publicación del Proyecto

En otros tutoriales con Vue JS normalmente creamos el código y las vistas del proyecto, pero nunca te enseño a publicarlo, cuando un proyecto es publicado, se puede subir a un hosting para que otros usuarios lo puedan ver.

Vamos a generar una versión limpia de nuestro proyecto, esto se llama pasar el proyecto a producción, para esto ejecutamos el siguiente comando.

Luego de ejecutar el comando anterior, Vue JS me ha generado un directorio llamado dist, en el se encuentran todos los archivos de mi proyecto, listo para ser publicados en un servidor o hosting.

Dentro del directorio dist hay un archivo llamado index.html y si lo abro en el navegador, debería de ver el buscador de pokemones.

Si tienes un problema con la ruta de los archivos en donde el navegador lanza los siguiente errores:

Solo quítale el slash ( “/” ) que se encuentra antes de la ruta a cada archivo CSS o JS, por ejemplo (Lee los comentarios en el siguiente código):

Una vez que borramos los Slash, abrimos nuevamente el archivo index.html y podemos ver el buscador de pokemones funcionando sin problemas.

Bien eso es todo, al inicio de cada parte de este tutorial he colocado una Demo y en la última parte he colocado un enlace a un repositorio GitHub con el código de este proyecto.

Conclusión

Hemos aprendido a crear un buscador en tiempo real con Vue JS, tu le puedes agregar otras funcionalidades al buscador, solo es cuestión que te pongas manos a la obra.

Nota(s) 

  • Los pasos mencionados y el código utilizado en este tutorial pueden ser modificados o continuar en el futuro, esto no depende de mi, si no de la Empresa que da soporte a Vue JS.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments