Crear y desplegar una aplicación con Vue CLI

a. Definición

Hasta ahora, hemos utilizado ejemplos que se pueden integrar en cualquier sitio web tradicional con una arquitectura cliente-servidor clásica, independientemente del lenguaje del servidor utilizado. Hemos visto cómo Vue.js puede manipular el DOM de las páginas de nuestro sitio web tradicional, para hacerlas ricas y reactivas. El lado progresivo de este framework lo convierte en una muy buena alternativa al uso del API DOM manual o mediante librerías como MooTools, jQuery o UmbrellaJS. Pero Vue.js también se puede utilizar para desarrollar aplicaciones web modernas de tipo SPA (Single Page Application) de principio a fin.

A diferencia de un sitio web tradicional donde el servidor carga los datos y los utiliza para generar una página HTML para luego devolverla al navegador, con un SPA solo se devuelve una página en la primera llamada de la URL con todos los componentes que permiten procesar los datos y generar el HTML.

Por tanto, la potencia de cálculo para generar las páginas se transfiere del servidor al cliente. En otras palabras, el estado de la aplicación durante su ciclo de vida ya no lo gestiona el servidor, sino el cliente. También hablamos de renderizado del lado del cliente (CSR - Client Side Rendering).

A continuación, los componentes de la aplicación se cargan dinámicamente mientras se navega por la misma página, sin que sea necesario volver a llamar a otra URL del servidor. Por lo tanto, ya no hay ninguna interrupción durante la navegación. Esto significa que el sitio web es más fluido y reactivo para el usuario. La página se muestra después de que el navegador haya cargado y ejecutado el código JavaScript. Por lo tanto, ya no existe este pequeño lapso de tiempo entre la visualización del HTML y la disponibilidad de las funcionalidades JavaScript de la página.

Al navegar, es posible simular varias URL para acceder a un estado particular de la página, utilizando el plugin Vue Router. No son necesarias llamadas adicionales al servidor. Veremos cómo usarlo en el capítulo Utilizar Vue Router para la navegación.

Para recuperar datos o persistirlos en el servidor, las solicitudes se envían a los puntos finales (endpoints) del API REST. Por definición...

a. Los plugins

Vue CLI se basa en una arquitectura que utiliza plugins.

Si echa un vistazo al archivo package.json, verá la lista de dependencias utilizadas por su aplicación en la sección de dependencias y la lista de dependencias utilizadas en tu entorno de desarrollo en la sección devDependencies.

Observamos muchas dependencias con el prefijo @vue/cli-plugin-. Estos son los plugins de Vue CLI. Por ejemplo, el plugin vue-cli-service es el que proporciona el comando vue en el terminal. Lo usamos para lanzar el asistente gráfico y crear nuestro proyecto.

Esta arquitectura hace que Vue CLI sea flexible y extensible. Si desea desarrollar su propio plugin Vue CLI, consulte la siguiente documentación:

https://cli.vuejs.org/dev-guide/plugin-dev.html

Puede instalar un plugin CLI de Vue a través del asistente gráfico o mediante el comando: 

vue add nombre-de-plugin 

Durante la instalación, un plugin genera archivos, modifica la configuración de Webpack y puede inyectar nuevos comandos vue.

Puede mostrar la lista de todos los comandos con el comando:

npx vue-cli-service help 

Para obtener la lista de comandos básicos para el servicio use:

vue --help 

Hay muchos plugins de Vue CLI para agregar funcionalidades a su proyecto. Cuando desee agregar un plugin, encontrará una lista disponible utilizando el asistente gráfico. Se recomienda pasar por el asistente gráfico para instalar un plugin. Una vez que el plugin está instalado, puede configurarlo muy fácilmente.

En la opción de scripts del archivo package.json están los comandos disponibles a través de npm o yarn:

"scripts": { 
  "serve": "vue-cli-service serve", 
  "build": "vue-cli-service build", 
  "test:unit": "vue-cli-service test:unit", 
  "test:e2e": "vue-cli-service test:e2e", 
  "lint": "vue-cli-service lint" 
}, 

Es libre de agregar más según sea necesario. Puede ejecutarlos con el siguiente comando:

npm run nombre-del-script 
//o ...

a. Compilar su aplicación con Webpack

Para desplegar su aplicación, primero debe iniciar la compilación de Webpack con uno de los siguientes comandos:

// en la raíz de la carpeta src 
vue build 
 
// en la raíz del proyecto 
npx vue-cli-service build 
 
// en la raíz del proyecto 
npm run build 

b. Previsualizar en local

Una vez que su aplicación ha sido compilada, si va a la carpeta /dist y abre el archivo index.html en su navegador, su aplicación no funcionará (excepto si ha configurado un valor relativo con la opción publicPath).

Puede obtener una vista previa de su aplicación utilizando un servidor de archivos estático HTTP local.

// instalar el paquete 
npm install -g serve 
 
// lanzar el servidor 
serve -s ruta_remota 

Acceda a su aplicación en la dirección: http://localhost: 5000.

Una vez instalada, inicie la extensión, seleccione la ubicación de su carpeta /dist e inicie el servidor. La aplicación será accesible en la dirección: http://localhost:8887.

c. Desplegar su aplicación en un servidor

Aplicación que se utiliza con un framework backend

Si está utilizando su aplicación Vue.js en una página renderizada por un framework de backend, como Laravel y Symfony en lenguaje PHP, o Struts y SpringBoot en lenguaje Java, es posible que deba usar el archivo index.html generado por Webpack como un template de la página que ha representado el framework de backend. Puede utilizar la opción indexPath en el archivo de configuración vue.config.js para especificar la ubicación del archivo index.html generado.

Como el framework de backend es quien sirve su aplicación, debe consultar la documentación del framework para la implementación.

Aplicación que utiliza el API de un framework backend

Después de la compilación, su aplicación es un conjunto de archivos en el directorio ...