¿Qué es VueJS?

Vue.js es uno de los framework JavaScript más utilizados en el mundo del front-end, y en mi opinión, el más sencillo de aprender y utilizar.

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 Node.js.

Generar nuestro primer proyecto Vue.js

Una vez instalado Node.js, crearemos nuestro proyecto VueJS mediante Vite, que en resumidas cuentas, es una herramienta que ayuda a construir y configurar proyectos Vue.js (y otros frameworks) de manera rápida y eficiente. Mediante este comando crearemos el proyecto con Vite, y en el caso de no tenerlo instalado, al ejecutar el comando nos dará la opción de instalarlo.

npm create vite@latest hola-mundo-app -- --template vue

Una vez terminado, tendremos en una carpeta llamada "hola-mundo-app" nuestra aplicación VueJS. Nos dirigimos dentro de esta carpeta y ahora instalaremos sus dependencias con este 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 nuestra consola, por defecto, suele ser http://localhost:5173/.

Estructura de nuestro proyecto

Index.html

El archivo index.html es el punto de entrada de nuestra aplicación. Aunque no modificaremos este archivo directamente, es importante que contenga un div con el ID app. Este div servirá como el contenedor donde Vue.js renderizará todo el contenido de nuestro proyecto una vez que comencemos a trabajar en él.

App.vue

El archivo App.vue es el componente raíz de nuestra aplicación Vue.js. Aquí es donde definimos la estructura básica de nuestra aplicación. Este archivo contiene el template principal y la lógica. Todo el contenido de nuestra aplicación se estructurará a partir de este componente principal.

En este archivo ya contamos con un componente que vite ha creado por nosotros a modo de ejemplo. Vamos a hacer algunas modificaciones para que el ejemplo sea más sencillo. Dejaremos App.vue de esta forma:

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <HelloWorld />
  </div>
</template>

HelloWorld.vue

Ahora nos dirigimos a HelloWorld.vue, dentro de la carpeta src/components. Este es el componente generado por vite, al que se referenciaba en App.vue.

En Vue.js, los componentes se estructuran en tres secciones principales: template, script y style. Cada una de estas secciones cumple un rol específico en la definición y comportamiento del componente.

1. Template

La sección <template> define la estructura HTML del componente.

2. Script

La sección <script> contiene la lógica y datos del componente. Aquí se define el comportamiento del componente.

3. Style

La sección <style> contiene las definiciones de estilos CSS para el componente. Si se usa el atributo scoped, los estilos se aplicarán solo a este componente, evitando conflictos con otros componentes.

Hola mundo con VueJs

Ahora vamos a modificar el componente HelloWorld, para mostrar por pantalla "Hello World", para ello crearemos una variable en la parte del script, llamada hi

<script setup>
const hi = 'Hello world'
</script>

En la parte del template, llamaremos a esta variable, en VueJS podemos pintar el valor de una variable poniéndola entre doble llaves y también añadiremos el logo de VueJS que trae el proyecto en la carpeta src/assets:

<template>
  <h1>{{ hi }}</h1>
 <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
</template>

Y por último, le añadiremos un estilo, añadiendo la palabra scoped en la etiqueta, para que solo sea aplicable a este componente.

<style scoped>
h1 {
  color: #42b983;
}
img {
  width: 300px;
}
</style>

Este sería el código de nuestro componente completo:

<script setup>
const hi = 'Hello world'
</script>

<template>
  <h1>{{ hi }}</h1>
 <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
</template>

<style scoped>
h1 {
   color: #42b983;
}
img {
  width: 300px;
}
</style>

Y nuestra aplicación mostraría el mensaje con el logo de VueJS mediante nuestro componente: