Quizás, si nunca has trabajado con un framework de Javascript, te sientas algo perdido a la hora de comprender como funciona VueJS. En este artículo vamos a dar un repaso a la mayoría de cuestiones que se nos pueden plantear para comprender como trabajar con este framework y ser más productivos con él.
Examinaremos los archivos index.html, main.js o main.ts y los comandos de NPM necesarios para arrancar el servidor de desarrollo o generar el build con la web definitiva.
Comenzar un proyecto Vue
El primer paso para comenzar a trabajar en un proyecto Vue, es crearlo. Para ello, lo recomendable es utilizar el asistente oficial create-vue, en su versión de terminal con vue create. También es recomendable conocer la estructura de carpetas de Vue, así como muchos de los ficheros de configuración que se utilizan en él.
Repasemos los pasos para crear un nuevo proyecto Vue:
# Creamos el proyecto Vue con el asistente
$ npm init vue@latest project-name
# Accedemos a la carpeta creada con el asistente
$ cd project-name
# Abrimos el editor de código
$ code .
# Arrancamos el servidor de desarrollo
$ npm run dev
Una vez hemos hecho esto, tendremos arrancado un servidor de desarrollo en nuestro equipo para ver el proyecto en un navegador a medida que modificamos el código.
El archivo index.html
Vue toma el fichero index.html del raíz del proyecto como plantilla inicial para partir de ella y mostrar en el navegador. Si observamos dicha plantilla, veremos que su código es algo similar a esto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Si nos fijamos bien en el código, simplemente se trata de un código HTML normal y corriente, donde referenciamos a un favicon (icono de pestaña del navegador), le establecemos un título al documento, y cargamos el script de la ruta src/main.js.
Justo antes, veremos el siguiente código:
<div id="app"></div>
Se trata de una capa contenedora <div> con un id="app". Este suele ser el elemento que va a contener toda la aplicación web realizada con Vue. Fuera de esta etiqueta podemos colocar lo que queramos en este fichero .html, pero no será manipulado mediante Vue (siempre se podría manipular a través de Javascript nativo).
Al tratarse de una aplicación web SPA (Single Page Application), todo ocurrirá en esta página HTML única, de ahí su nombre. No navegaremos a través de diferentes páginas como se hace con el modelo MPA (Multiple Page Application), sino que los cambios se harán de forma dinámica mediante Javascript.
El archivo src/main.js
En Vue 3 el archivo main.js (o main.ts si usamos TypeScript) cambia ligeramente respecto a Vue 2, pero resulta mucho más sencillo en comparación. Veamos el código:
import "./assets/main.css";
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");
En primer lugar, observa que se utiliza el import de Javascript para cargar un fichero .css. Esto no es estándar, sino que es una facilidad que otorga el uso de Vite, el automatizador de Vue, y que permite hacerlo desde Javascript en lugar de cargarlo desde el HTML con la etiqueta <link>.
Un poco más abajo, importamos el núcleo de Vue y de Pinia. En Vue 2, se importaba Vue como un objeto por defecto, en este caso importamos la función createApp. Luego, en lugar de hacer un new Vue() como en Vue 2, abordamos un enfoque mucho más funcional, donde utilizamos createApp(App) y vamos encadenando los métodos .use() con los plugins de Vue que estemos utilizando.
Por último, ejecutamos el método .mount(), que es el encargado de montar la aplicación del fichero App.vue en el elemento HTML con el selector indicado, es decir, id="app".
Como se puede ver, se hace exactamente lo mismo que en la versión Vue 2, pero con una sintaxis mucho más agradable y fácil de entender.
Generación del build
Con npm run dev hemos comentado que activamos el modo de desarrollo de Vue, abriendo un navegador donde podemos ver nuestro proyecto a medida que vamos editando código en el navegador. Pero es importante tener en cuenta que esta versión de desarrollo no es la que se utilizará al final en la web de producción, sino que solo sirve para modificar rápidamente en nuestro editor.
Sin embargo, si ya tenemos nuestra aplicación web terminada y queremos publicarla, sólo tenemos que detener nuestro servidor de desarrollo pulsando CTRL+C (o cerrando la terminal) y ejecutar el siguiente comando:
# Ejecutamos el modo producción de Vue
$ npm run build
Este comando de NPM, tras algunos segundos, procesará toda la aplicación y generará los archivos finales para subir a la web de producción, colocándolos en una carpeta llamada dist. Esta carpeta junto a los archivos que contiene son lo que se suele denominar el build de la aplicación (los archivos contruídos).
Cuando haya terminado de generarlos, nos mostrará un resumen parecido al siguiente, donde nos indica los archivos creados, su tamaño y alguna información adicional que sea relevante:
> [email protected] build
> vite build
vite v4.3.9 building for production...
✓ 44 modules transformed.
dist/assets/logo-277e0e97.svg 0.28 kB │ gzip: 0.20 kB
dist/index.html 0.42 kB │ gzip: 0.28 kB
dist/assets/AboutView-4d995ba2.css 0.09 kB │ gzip: 0.10 kB
dist/assets/index-efcb3133.css 4.20 kB │ gzip: 1.30 kB
dist/assets/AboutView-52933a18.js 0.23 kB │ gzip: 0.20 kB
dist/assets/index-4c0ba773.js 85.37 kB │ gzip: 33.61 kB
✓ built in 641ms
La diferencia entre los tamaños size y los tamaños gzipped es que el primero es el tamaño que ocupa el fichero en disco, mientras que el segundo (gzipped) es el tamaño que ocupa el fichero comprimido, puesto que en los navegadores actuales, la información se comprime en el servidor y es descomprime en el cliente (navegador), haciendo que la transferencia sea más rápida puesto que se envían por Internet los ficheros comprimidos.
