¿Qué es VueJS?

VueJS es un framework fronted progresivo, es decir, no tenemos por qué hacer uso de todas sus herramientas si nuestra aplicación va a ser muy simple, como puede ser el uso de webpack, el manejo de rutas, etc. En la actualidad, se está utilizando mucho en Laravel, ya que en las últimas versiones viene ya con vuejs y en pocos minutos podemos hacer uso de él sin apenas configuración alguna.

En este artículo instalaremos VueJS y aprenderemos a hacer un "hola mundo" con él.

¿Qué necesitamos para instalar VueJS?

Necesitamos instalar nodejs en nuestro equipo, a partir de este enlace descargar nodejs.

Generar nuestro primer proyecto VueJs

Una vez instalado nodejs, haremos uso del siguiente comando de nodejs para instalar vuejs:

npm install -g vue-cli

Cuando se termine de ejecutar el comando anterior, nos dirigimos a nuestra consola, vamos a la  ruta donde queramos generar nuestro proyecto y ejecutaremos el siguiente comando:

vue init webpack-simple holamundo

Hecho esto, se nos habrá creado una carpeta con el nombre holamundo, donde tendremos nuestro primer proyecto VueJS. Nos dirigimos a la carpeta holamundo, desde nuestra consola e instalaremos sus dependencias, mediante el comando:

npm install

Tras terminar de ejecutarse, ya podremos arrancar nuestro proyecto con el comando:

npm run dev

Se nos debe abrir en nuestro navegador, en el caso de que no se abra, ve a la ruta que aparece en la línea "Project is running at …" De nuestra consola.

Estructura de nuestro proyecto

Vamos a centrarnos en la carpeta src, que es donde se encuentran los archivos que vamos a tocar en este artículo.

Main.js

En main.js con el siguiente código:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

Tenemos dos import, uno es el de vue y el otro es app, que simplemente es el archivo que tenemos en la misma carpeta src, con el nombre de App.vue.

Después de los imports encontramos una nueva instancia de vue, en la que se pasa como primer parámetro (el) "#app" que hace referencia al ID de la etiqueta donde se va a reflejar nuestro componente vue y en el segundo parámetro llamado render, es donde se indica que componente va a aparecer, en este caso, el componente App (es decir, el archivo App.vue).

App.vue

Bien, ahora nos dirigimos al archivo App.vue. Si nos fijamos en el archivo, podremos observar que dentro de la etiqueta template, se encuentra todo el contenido que nos aparece en nuestro navegador.

Este archivo tiene la siguiente estructura:

Template: En esta etiqueta es donde vamos a escribir todo el código html y también haremos uso de las variables.

Script: En el script irá toda la lógica de este archivo, es decir, variables, funciones…

Style: Aquí escribiremos el css de nuestro archivo.

Index.html

Ahora nos iremos a nuestro archivo index.html, que está en la raíz de nuestro proyecto, fuera de la carpeta src.

Este archivo es el que realmente se esta mostrando en nuestro navegador, solo que el contenido de este es dinámico, ya que dentro del div que contiene el id "app" es donde se está reflejando el contenido de App.vue, como comentamos en el análisis del archivo main.js.

Hola mundo con VueJs

Ahora vamos a hacer nuestro hola mundo en nuestro proyecto, para ello, vamos a dirigirnos a app.vue.

Vamos a hacer lo siguiente, vamos a limpiar todo el contenido de nuestro archivo y solo vamos a dejar las siguientes etiquetas:

<template>
  <div>

  </div>
</template>

Es importante recordar siempre, que dentro de template debemos crear un div, ya que todo el contenido de nuestro componente debe estar en un mismo contenedor.

Una vez hecho esto, nos vamos a la parte script de nuestro archivo, vamos a crear una variable y le añadiremos el mensaje "hola mundo":

<script>
export default {
  name: 'app',
  data () {
    return {
      mensaje: 'Hola mundo'
    }
  }
}
</script>

Y un estilo básico a un h1, por ejemplo, que es donde mostraremos nuestra variable:

<style>
  h1{
    color: #f5716c;
    text-align: center;
    font-weight: bold;
  }
</style>

Añadimos la variable a nuestro, template, aunque hay dos formas de mostrarla:

<template>
  <div>
      <h1>{{mensaje}}</h1><!--Esta opción se suele utilizar cuando queremos mostrar nuestra variable y algo más como por ejemplo "Este es el mensaje: {{mensaje}}"-->
      <h1 v-text="mensaje"></h1><!--A diferencia de la otra, esta forma se utiliza cuando queramos que el elemento solo muestre el valor de la variable-->
  </div>
</template>

Y nuestro navegador ya mostraría el valor de nuestra variable dentro de una etiqueta h1.

Espero que os haya gustado el primer artículo sobre VueJs. Cualquier duda no dudes en contactar con nosotros, ¡Nos vemos pronto!