Cómo crear un aplicación Vue.js en 5 minutos

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

Si prefiere usar npm puede usar este comando:

Funcionará en ambos casos. Una vez finalizada la instalación, debería aparecer la siguiente pantalla:

2. Crear un proyecto

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:

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:

or

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.