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 @vue/cli, en su versión de terminal con vue create, o en su versión gráfica con vue ui. 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:
# Instalamos el asistente CLI de Vue si no lo tenemos instalado
$ npm install -g @vue/cli
# Creamos un proyecto Vue con el asistente
$ vue create 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 serveUna 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 public/index.html 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" />
<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" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>
Lo sentimos pero <%= htmlWebpackPlugin.options.title %> no funcionará
correctamente sin Javascript activado. Por favor, actívalo para continuar.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>Si nos fijamos bien en el código, veremos que hay una especie de variables o parámetros especiales como <%= BASE_URL %> o <%= htmlWebpackPlugin.options.title %> que no son código HTML exactamente, sino que se trata de unas etiquetas especiales que Vue (a través de Webpack) modificará para reemplazar por valores que conoce del proyecto.
Sin embargo, lo que nos interesa es la parte del cuerpo del documento HTML. En primer lugar, veremos una etiqueta <noscript> que contiene un texto que aparecerá al usuario que vea la página con un navegador sin Javascript activado. Obviamente, como estamos trabajando con un framework Javascript, es obligatorio tener Javascript activado.
Un poco más adelante, vemos el siguiente código:
<div id="app"></div>
<!-- built files will be auto injected -->Se trata de una capa contenedora <div> con 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).
Un poco más adelante, veremos un comentario de texto. A partir de él, se insertarán algunas etiquetas HTML <script>. Estas etiquetas son Javascript procesado por el framework, el cuál se encarga de determinar cuál es el Javascript relevante para la página y crear un archivo, generalmente llamado app.js.
Dicho archivo contendrá todo ese código Javascript de la aplicación en un sólo fichero. Este proceso es el que se llama crear un bundle o informalmente «bundlelizar». En muchos casos el CSS también sufre un proceso parecido.
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 (Vue 2)
Como hemos dicho, el archivo index.html anterior es el punto de entrada que leerá el navegador, pero incluirá una referencia a un archivo Javascript denominado app.js que se construye tras procesar el archivo src/main.js (o main.ts si utilizamos TypeScript). Este es lo que se considera nuestro entrypoint (punto de entrada) de Javascript y es por el que tenemos que empezar a investigar.
Dicho fichero src/main.js suele tener un código similar al siguiente:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");En primer lugar, importamos Vue (núcleo del framework), router (gestor de rutas para Vue, opcional) y store (almacén de estados para Vue, opcional). Observa que también importamos App que es un componente .vue, que comenzaremos a ver una vez terminemos este capítulo. De momento lo que interesa saber es que es el componente de la página principal de nuestro proyecto.
Un poco más abajo, vemos que desactivamos Vue.config.productionTip. Se trata de una variable que activa o desactiva el mensaje por la consola Javascript del navegador que indica que estamos utilizando Vue en producción.
La parte realmente interesante es la que viene a continuación. Vamos a reescribirla de un modo que, creo, se leerá mucho más fácil:
// Opciones de Vue
const options = {
router: router,
store: store,
render: function(createElement) {
return createElement(App);
}
});
const app = new Vue(options);
app.$mount("#app");Observa que, en primer lugar, creamos una constante de opciones donde colocamos la información importada del router y del store. En segundo lugar, tenemos una función render, que es la que se encarga de crear una estructura HTML para la aplicación principal, que reside en el componente Vue que también hemos importado.
Por último, creamos una app que será una instancia de Vue a la que le pasamos las opciones anteriores, y finalmente, llamamos al método .$mount() para decirle en el elemento HTML donde montaremos nuestra aplicación Vue, que es el <div id="app"> del index.html.
El archivo src/main.js (Vue 3)
En Vue 3 el archivo main.js (o main.ts si usamos TypeScript) cambia ligeramente, resultando mucho más sencillo. Veamos las diferencias que tiene:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.mount("#app");En primer lugar, vemos que la importación del núcleo de Vue cambia. En lugar de importar Vue como un objeto por defecto, se importa concretamente la función createApp. Así pues, en lugar de hacer un new Vue() como hacíamos en Vue 2, en este caso 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() para indicar el elemento HTML donde se montará la aplicación. Observa también que en Vue 3 el Vue.config.productionTip ha sido eliminado.
Esto último, quizás se vea más sencillo de esta forma:
const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#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 serve 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 buildEste 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:
File Size Gzipped
dist/js/chunk-vendors.743d570b.js 119.79 KiB 43.27 KiB
dist/js/app.61cd6fe1.js 7.77 KiB 2.64 KiB
dist/js/about.03dcec96.js 0.34 KiB 0.26 KiB
dist/css/app.aaa5a7e8.css 0.42 KiB 0.26 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.htmlLa diferencia entre los tamaños size y los tamaños gzipped es que el primero es el tamaño que ocupa en disco el fichero, 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 ficheros más pequeños.
