Primeros pasos en VueJS

¿Qué es VueJS?

Vuejs es un framework fronted progresivo, es decir, no tenemos porque 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 esta 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 dirijimos 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 mendiante 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 que no se abra, ve a la ruta que aparece en la linea «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 articulo.

Main.js

En main.js con el siguiente codigo:

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.

Despues de los imports encontramos una  nueva instacia de vue, en la que se pasa como primer parametro (el) «#app» que hace referencia al id de la etiqueta donde se va reflejar nuestro componente vue y en el segundo parametro 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 dirijimos al archivo App.vue. Si nos fijamos en el archivo, podremos observar que dentro de la etiquiqueta 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 codigo html y tambien 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 raiz 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 éste es dinámico ya que dentro del div que contiene el id «app» es donde se esta 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 diriginirnos 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 articulo sobre VueJs. Cualquier duda no dudes en contactar con nosotros, ¡Nos vemos pronto!