Vue.js se está volviendo cada vez más popular, convirtiéndose en un competidor significativo de frameworks como Angular o React.js. Como front-end framework para principiantes, conquista con éxito los corazones de los desarrolladores de front-end junior y de las personas que acaban de empezar a aprender programación de front-end.
En este artículo, quiero mostrarte cómo construir una simple aplicación Vue.js con Bootstrap y REST API en 5 minutos.
Para crear esta aplicación, sería una ventaja tener un conocimiento básico de HTML, CSS y Javascript. También, algunos conocimientos básicos de Vue.js pueden ser útiles.
Importante: hay que tener Node.js y Yarn instalados en el ordenador.
Empezemos!
1. Instalar @vue/cli
Empezaremos por instalar Vue CLI, una herramienta que hará que nuestro arranque sea mucho más fácil. Usando Vue CLI, podemos crear una aplicación Vue.js lista para usar, con todas las dependencias necesarias. Para instalar la herramienta, usaremos el siguiente comando
yarn global add @vue/cli
Si prefiere usar npm puede usar este comando:
npm instalar -g @vue/cli
Funcionará en ambos casos. Una vez finalizada la instalación, debería aparecer la siguiente pantalla:
2. Crear un proyecto
Ahora, es súper fácil crear el proyecto usando la herramienta Vue CLI;. A continuación, hay que desplazarse hasta la carpeta en la que se desea crear la aplicación en la línea de comandos y ejecutar el siguiente comando:vue create vueapp
vueapp es el nombre de nuestro proyecto. Se puede elegir cualquier otro nombre para la aplicación, dependiendo de las preferencias del usuario. Después de que se ejecute el comando, aparecerá una instrucción para elegir un preset y dos opciones como en la pantalla de abajo:
Para facilitarlo y no complicarlo demasiado, vamos a seleccionar la configuración predeterminada y a clicar enter. A continuación, se iniciará la instalación, que puede tardar unos segundos. Una vez que haya terminado con éxito, se mostrará una nueva carpeta vueapp (o diferente dependiendo del nombre seleccionado), y se podrá ejecutar el proyecto.
3. Iniciar un proyecto
Después de crear un nuevo proyecto, verá más instrucciones sobre qué hacer para iniciar la aplicación. Así que, de acuerdo con las instrucciones, vayamos a la carpeta vueapp (o diferente dependiendo del nombre seleccionado), y luego ejecutemos:
yarn serve
o
npm run serve
si se usa npm, después de la carga, debería ver la siguiente pantalla en linea de comandos:
La aplicación se inicia en http://localhost:8080/ por defecto, pero si preferís, podéis cambiar el número de puerto. Vamos a abrir el navegador para comprobar lo que hay dentro de nuestro proyecto recién creado ejecutando la dirección localhost en la ventana del navegador. Se visualizará la siguiente pantalla.
4. Crear un nuevo componente
Vamos a abrir un fichero de la aplicación en nuestro editor favorito, y vamos a la carpeta ./src/
components. Dentro de la carpeta de componentes, vamos a crear el archivo Users.vue. Dentro de un archivo vacío, crear un código como el del ejemplo :
<template> <h3>Users:</h3> </template> <script> export default { name: 'Users', } </script> <style> h3 { margin>-bottom:5>%; } </style>
Ahora, vamos a configurar este componente para que se muestre en el navegador. Para ello, se debe acceder al archivo App.vue y cambiar el componente para eliminar el componente HelloWorld.vue y mostrar el componente Users.vue en su lugar. El código final en este archivo debería verse como se muestra a continuación:
<template> <div id="app"> <Users /> </div> </template> <script> import Users from './components/Users.vue' export default { name: 'app', components: { Users } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Es hora de comprobar si nuestros cambios funcionan y son visibles en el navegador. Vamos a recargar la aplicación. Se debería ver el siguiente contenido
Ahora vamos a crear una llamada a la API.
5. Crear una llamada a la API
Bien, ahora estamos listos para crear una llamada a la API.
Utilizaremos una API fake del sitio web de JSONPlaceholder. Para obtener los datos, usaremos los axios. Primero, hay que instalar los axios, así que vamos a cambiar a la línea de comandos y usar el siguiente comando para instalar axios:
yarn add axios
or
npm install axios
si se usa npm.
Una vez que axios se haya instalado con éxito, vamos a importarlo dentro de las etiquetas de script del componente Users:
<script> import axios from 'axios'; export default { name: 'Users' } </script>
Antes de crear una llamada de API real, echemos un vistazo a los datos que obtendremos como respuesta:
[ { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "[email protected]", "address": { "street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496" } }, "phone": "1-770-736-8031 x56442", "website": "[email protected]", "company": { "name": "Romaguera-Crona", "catchPhrase": "Multi-layered client-server neural-net", "bs": "harness real-time e-markets" } }, { "id": 2, "name": "Ervin Howell", "username": "Antonette", "email": "[email protected]", "address": { "street": "Victor Plains", "suite": "Suite 879", "city": "Wisokyburgh", "zipcode": "90566-7771", "geo": { "lat": "-43.9509", "lng": "-34.4618" } }, "phone": "010-692-6593 x09125", "website": "[email protected]", "company": { "name": "Deckow-Crist", "catchPhrase": "Proactive didactic contingency", "bs": "synergize scalable supply-chains" } }, ...
Vale, ahora vamos a añadir la función data() que devolverá a los usuarios y la configurará como nula por ahora, más tarde guardaremos la respuesta de la API a la variable, y después de eso, crearemos una llamada real a la API usando el axios get method:
<script> import axios from 'axios'; export default { name: 'Users', data() { return { users: null, }; }, created: function() { axios .get('https://jsonplaceholder.typicode.com/users') .then(res => { this.users = res.data; }) } } </script>
6. Visualizar los datos
Es el momento de usar Bootstrap para crear una plantilla sencilla y bonita. Vamos a la carpeta ./public para actualizar el archivo index.html. En la sección head del archivo, colocamos el enlace a los css de Bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>tutorial</title> </head> <body>
Ahora, vamos a crear una plantilla con una tabla para poner dentro nuestros datos. Para cada elemento se utilizaremos una directiva v-for y una v-bind:key.
<template> <div class="container"> <h3>Users:</h3> <table class="table"> <thead> <tr> <th scope="col">Id</th> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">City</th> </tr> </thead> <tbody> <tr v-for="user in users" v-bind:key="user.id"> <th scope="row">{{user.id}}</th> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.address.city}}</td> </tr> </tbody> </table> </div> </template>
Y voilá! Nuestra app está lista!
En este artículo, hemos creado una sencilla aplicación Vue.js con la obtención de datos de la API. Para crear una aplicación utilizamos Vue CLI, axios para la llamada a la API y Bootstrap para el estilo. Como resultado, conseguimos una aplicación con una lista de usuarios en una tabla.
Espero que este tutorial os resulte útil y que lo podáis utilizar como base para practicar con Vue.js.
Silvia Mazzetta
Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple years of website design expertise behind her. She turns conceptual ideas into highly creative visual digital products.
Artículos relacionados
Crear PDF con Javascript y jsPDF
El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…
Como hacer tu propio cursor personalizado para tu web
Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…
Explorando la API de CSS Paint: Redondeo de formas parte 1
Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…
Cómo enviar un correo electrónico desde un formulario de contacto HTML
En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…
Cómo hacer un sitio web multilingüe sin redireccionamiento
Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…
Comenzando con Bootstrap-Vue paso a paso
Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…
Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch
Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…
Creación de un sencillo spinner-loader CSS
En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…
Los mejores selectores de fechas para Bootstrap y tu aplicación
Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…
Validación de formularios HTML usando BULMA y vanilla JavaScript
Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…
Cómo usar el efecto Parallax.Js en tu sitio web
Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…
Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida
En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…