Aprender Vue

Capítulo 1. ¡Bienvenido al mundo Vue.js!

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Lanzado inicialmente en 2014, Vue.js ha experimentado una rápida adopción, especialmente en 2018. Vue es un marco popular dentro de la comunidad de desarrolladores, gracias a su facilidad de uso y flexibilidad. Si buscas una gran herramienta para construir y enviar aplicaciones web de excelente rendimiento a los usuarios finales, Vue.js es la respuesta .

Este capítulo destaca los conceptos básicos de Vue.js y te guía a través de las herramientas que necesitas para tu entorno de desarrollo de Vue.js. También explora herramientas útiles que hacen que tu proceso de desarrollo de Vue.js sea más manejable. Al final del capítulo, tendrás un entorno de trabajo con una sencilla aplicación Vue.js lista para comenzar tu viaje en el aprendizaje de Vue.js.

¿Qué es Vue.js?

Vue.js, o Vue, significa vista en francés; es un motor JavaScript para construir interfaces de usuario (IU) progresivas, componibles y reactivas en aplicaciones frontales.

Nota

A partir de ahora utilizaremos el término Vue para indicar Vue.js.

Vue está escrito sobre JavaScript y ofrece un mecanismo organizado para estructurar y construir una aplicación web . También actúa como el transcompilador(transpiler) que compila y traduce el código Vue (como un Componente de Archivo Único, del que hablaremos más adelante en "Estructura del Componente de Archivo Único Vue") en código HTML, CSS y JavaScript equivalente en tiempo de compilación antes de su implementación. En modo autónomo (con un archivo de script generado), el motor Vue realiza la traducción del código en tiempo de ejecución.

Vue sigue el patrón MVVM(Modelo-Vista-Vista-Modelo). A diferencia del MVC (Modelo-Vista-Controlador),¹ el ViewModel es el aglutinante que vincula los datos entre la Vista y el Modelo. Permitir la comunicación directa de la vista y el modelo habilita progresivamente la reactividad del componente .

En resumen, Vue se creó para centrarse únicamente en la capa Vista, pero es adaptable de forma incremental para integrarse con otras bibliotecas externas para un uso más complejo.

Dado que Vue se centra únicamente en la capa Vista, potencia el desarrollo de aplicaciones de una sola página (SPA). Las SPA pueden moverse con rapidez y fluidez mientras comunican datos continuamente con el backend.

El sitio web oficial de Vue incluye la documentación de la API, la instalación y los principales casos de uso de referencia.

Las ventajas de Vue en el desarrollo web moderno

Una ventaja significativa de Vue es su documentación bien escrita y fácil de entender. Además, el ecosistema y la comunidad de apoyo creados en torno a Vue, como Vue Router, Vuex y Pinia, ayudan a los desarrolladores a configurar y ejecutar sus proyectos con el mínimo esfuerzo.

Las API de Vue son sencillas y familiares para cualquiera que haya trabajado antes con AngularJS o jQuery. Su potente sintaxis de plantillas minimiza el esfuerzo de aprendizaje necesario y facilita el trabajo con datos o la escucha de eventos del Modelo de Objetos del Documento (DOM) en tu aplicación.

Otra ventaja significativa que ofrece Vue es su tamaño. El tamaño de un framework es un aspecto sustancial del rendimiento de la aplicación, especialmente el tiempo de carga inicial en la entrega. En el momento de escribir esto, Vue es el framework más rápido y ligero (~10kB de tamaño). Esta ventaja se traduce en menos tiempo de descarga y mejor rendimiento en tiempo de ejecución desde la perspectiva del navegador.

Con el lanzamiento de Vue 3, la compatibilidad integrada con TypeScript ofrece ahora a los desarrolladores la ventaja de escribir tipos y hacer que su código base sea más legible, organizado y mantenible a largo plazo.

Instalar Node.js

Trabajar con Vue requiere configurar el ecosistema de desarrollo y conocimientos previos de codificación para seguir el proceso de aprendizaje. Node.js y NPM (o Yarn) son herramientas de desarrollo necesarias que debes instalar antes de empezar a trabajar en cualquier aplicación .

Node.js (o Node) es un entorno de servidor JavaScript de código abierto construido sobre el motor de tiempo de ejecución JavaScript V8 de Chrome. Node permite a los desarrolladores codificar y ejecutar aplicaciones JavaScript localmente o en un servidor alojado, fuera de un navegador.

Nota

Los navegadores basados en Chromium, como Chrome y Edge, también utilizan el motor V8 para interpretar el código JavaScript en código informático eficiente de bajo nivel y ejecutarlo.

Node es compatible con varias plataformas y es fácil de instalar. Si no estás seguro de haber instalado Node, abre tu terminal (o símbolo del sistema en Windows) y ejecuta el siguiente comando:

node -v

La salida debe ser una versión de Node o "Comando no encontrado" si Node no está instalado.

Si no has instalado Node, o tu versión de Node es inferior a la 12.2.0, visita el sitio web del proyecto Node y descarga el instalador de la última versión según tu sistema operativo(Figura 1-1).

Una vez finalizada la descarga, haz clic en el instalador y sigue las instrucciones paraconfigurarlo.

Al instalar Node, además del comando node, también tienes el comando npm añadido a la herramienta de línea de comandos. Si escribes el comando node -v, deberías ver que se muestra el número de la versión instalada .

Figura 1-1. Última versión para descargar en la web oficial de Node

MNP

El Gestor de Paquetes de Node (NPM) es el gestor de paquetes por defecto para Node. Se instala junto con Node.js por defecto. Permite a los desarrolladores descargar e instalar otros paquetes Node remotos con facilidad. Vue y otros frameworks frontales son ejemplos de paquetes Node útiles.

NPM es una potente herramienta para desarrollar aplicaciones JavaScript complejas, con capacidad para crear y ejecutar scripts de tareas (para iniciar un servidor de desarrollo local, por ejemplo) y descargar automáticamente las dependencias de los paquetes del proyecto.

De forma similar a la comprobación de la versión de Node, puedes realizar una comprobación de la versión de NPM a través del comando npm:

npm -v

Para actualizar tu versión de NPM, utiliza el siguiente comando:

npm install npm@latest -g

Con el parámetro @latest, tu herramienta NPM actualiza automáticamente su versión a la última. Puedes volver a ejecutar npm -v para asegurarte de que se actualiza correctamente. También puedes sustituir la palabra latest para apuntar a cualquier versión específica de NPM (en el formato xx.x.x). Además, debes indicar la instalación en el ámbito global con la bandera -g para que el comando npm esté disponible en cualquier lugar de tu máquina local. Por ejemplo, si ejecutas el comando npm install npm@6.13.4 -g, la herramienta se dirigirá a la versión 6.13.4 del paquete NPM para instalar y actualizar .

Versión de NPM para este libro

Recomiendo instalar la versión 7.x de NPM para poder seguir todos los ejemplos de código NPM de este libro.

Un proyecto Node depende de una colección de paquetes Node² (o dependencias) para estar en funcionamiento. En el archivo package.json dentro del directorio del proyecto, puedes encontrar estos paquetes instalados. Este archivo package.json también describe el proyecto, incluyendo el nombre, autor(es) y otros comandos de scripting aplicados al proyecto exclusivamente.

Cuando ejecutes el comando npm install (o npm i) dentro de la carpeta del proyecto, NPM hará referencia a este archivo e instalará todos los paquetes listados en una carpeta llamada node_modules, lista para que el proyecto los utilice. Además, añadirá un archivo package-lock.json para realizar un seguimiento de la versión instalada del paquete y de la compatibilidad entre dependencias comunes .

Para iniciar un proyecto desde cero con dependencias, utiliza el siguiente comando dentro del directorio del proyecto:

npm init

Este comando te guía a través de algunas preguntas relacionadas con el proyecto e inicializa un proyecto vacío con un archivo package.json que contiene tus respuestas .

Puedes buscar cualquier paquete público de código abierto en el sitio web oficial de NPM.

Hilo

Si NPM es la herramienta estándar de gestión de paquetes, Yarn es un gestor de paquetes alternativo y popular desarrollado por Facebook.³ Yarn es más rápido, seguro y fiable gracias a su mecanismo de descarga paralela y almacenamiento en caché. Es compatible con todos los paquetes NPM, por lo que puede utilizarse como sustituto de NPM .

Puedes instalar la última versión de Yarn según tu sistema operativo visitando el sitio web oficial de Yarn.

Si estás trabajando en un ordenador macOS y tienes Homebrew instalado, puedes instalar Yarn directamente utilizando el comando

brew install yarn

Este comando instala Yarn y Node.js (si no está disponible) globalmente.

También puedes instalar Yarn globalmente utilizando la herramienta de gestión de paquetes NPM con el siguiente comando:

npm i -g yarn

Ahora deberías tener Yarn instalado en tu máquina y listo para usar.

Para comprobar si Yarn está instalado y verificar su versión, utiliza el siguiente comando:

yarn -v

Para añadir un nuevo paquete, utiliza el siguiente comando:

yarn add <node package name>

Para instalar las dependencias de un proyecto, en lugar de npm install, sólo tienes que ejecutar el comando yarn dentro del directorio del proyecto. Una vez finalizado esto, de forma similar a NPM, Yarn también añadirá un archivo yarn.lock en el directorio de tu proyecto.

Nota

Utilizaremos Yarn como nuestra herramienta de gestión de paquetes para el código presentado en este libro.

Llegados a este punto, ya has configurado tu entorno de codificación esencial para el desarrollo de Vue. En la siguiente sección, veremos las Herramientas para Desarrolladores de Vue y lo que nos ofrecen para trabajar con Vue.

Herramientas para desarrolladores de Vue

Vue Developer Tools (o Vue Devtools) son las herramientas oficiales para ayudarte a trabajar con tus proyectos Vue localmente. Estas herramientas incluyen extensiones para Chrome y Firefox, y una aplicación de escritorio Electron para otros navegadores. Deberías instalar una de estas herramientas durante el proceso de desarrollo .

Los usuarios de Chrome pueden dirigirse al enlace de la extensión en Chrome Web Store e instalar la extensión, como se muestra en la Figura 1-2.

Figura 1-2. Página de la extensión Vue Devtools para Chrome

Para Firefox, puedes utilizar el enlace de extensión de la página de complementos de Firefox, que se muestra en la Figura 1-3.

Figura 1-3. Página de extensión de Vue Devtools para Firefox

Una vez instalada y activada tu extensión, puedes detectar si algún sitio utiliza actualmente Vue en producción. Cuando un sitio se construye con Vue, el icono Vue de la barra de herramientas del navegador se resalta como se muestra en la Figura 1-4.

Figura 1-4. Icono que confirma que el sitio oficial de Vue está construido con Vue

Las Vue Devtools te permiten inspeccionar el árbol de componentes Vue, los props y datos de los componentes, los eventos y la información de enrutamiento dentro de la consola de desarrollador del navegador. Las Vue Devtools dividen la información en varias pestañas, proporcionando información útil para depurar e inspeccionar los comportamientos de cualquier componente Vue dentro del proyecto.

Vite.js como herramienta de gestión de constructores

Introducido en 2020, Vite.js (o Vite) es un servidor de desarrollo de JavaScript que utiliza el módulo nativo ES⁴ durante el desarrollo en lugar de agrupar tu código en trozos de archivos JavaScript como hacen Webpack, Rollup, etc.

Nota

A partir de ahora utilizaremos el término Vite para indicar Vite.js.

Este enfoque permite a Vite realizar una recarga en caliente⁵ durante el desarrollo a una velocidad endiablada, haciendo que la experiencia de desarrollo sea fluida. También ofrece muchas funciones listas para usar, como la compatibilidad con TypeScript y la compilación bajo demanda, que está ganando popularidad y adaptación rápidamente entre la comunidad de desarrolladores .

La comunidad Vue ha sustituido la herramienta Vue CLI⁶ (que utiliza Webpack bajo el capó) con Vite para que sea la herramienta de construcción predeterminada para crear y gestionar proyectos Vue.

Crear una nueva aplicación Vue

Con Vite, hay varias formas de crear un nuevo proyecto de aplicación Vue. La forma más sencilla es utilizar la siguiente sintaxis de comando en tu símbolo del sistema o terminal :

npm init vue@latest

Este comando instalará primero create-vue, una herramienta oficial de andamiaje, y luego te presentará una lista de preguntas esenciales para configurar tu aplicación Vue.

Como se muestra en la Figura 1-5, las configuraciones utilizadas para la aplicación Vue en este libro incluyen:

El nombre del proyecto Vue, todo en minúsculas

Vite utiliza este valor para crear un nuevo directorio de proyecto anidado en tudirectorio actual .

TypeScript

Un lenguaje de programación tipado construido sobre JavaScript.

JSX⁷

En el Capítulo 2, hablaremos de cómo Vue permite escribir código en el estándar JSX (escribir sintaxis HTML directamente en un bloque de código JavaScript).

Router Vue

En el Capítulo 8, implementaremos el enrutamiento en nuestra aplicación utilizando Vue Router .

Pinia

En el Capítulo 9, hablaremos del uso de Pinia para gestionar y compartir datos en toda la aplicación.

Vitest

Esta es la herramienta oficial de pruebas unitarias para cualquier proyecto Vite, que exploraremos más a fondo en el Capítulo 11.

ESLint

Esta herramienta comprueba tu código según un conjunto de reglas de ESLint, ayudando a mantener tu estándar de codificación, hacerlo más legible y evitar errores de codificación ocultos .

Más bonito

Esta herramienta formatea tus estilos de código automáticamente para mantener tu código limpio, bonito y siguiendo un estándar de codificación.

Figura 1-5. Configuraciones para un nuevo proyecto de aplicación Vue

Al recibir las configuraciones deseadas, create-vue andamiaje el proyecto en consecuencia. Una vez hecho esto, te presentará un conjunto de comandos en orden para que los ejecutes y pongas tu proyecto en marcha localmente (ver Figura 1-6).

Figura 1-6. Comandos en orden a ejecutar para el proyecto recién creado

A continuación, exploraremos la estructura de archivos de nuestro proyecto recién creado .

Estructura del repositorio de archivos

Un nuevo proyecto Vue contiene la siguiente estructura inicial dentro del directorio src :

assets

Carpeta donde puedes poner las imágenes, gráficos y archivos CSS del proyecto.

components

Carpeta donde creas y escribes componentes Vue siguiendo el concepto de Componente de Archivo Único (SFC) .

router

Carpeta donde residen todas las configuraciones de enrutamiento.

stores

Carpeta donde creas y gestionas los datos globales del proyecto por tienda utilizando Pinia.

views

Carpeta donde residen todos los componentes Vue que se enlazan a las rutas definidas.

App.vue

El componente principal de la aplicación Vue, actúa como raíz para alojar todos los demás componentes Vue dentro de la aplicación.

main.ts

Contiene el código TypeScript responsable de montar el componente raíz (App.vue) en un elemento HTML de la página DOM. Este archivo es también donde se montan los plugins y las bibliotecas de terceros en la aplicación, como Vue Router, Pinia, etc .

La Figura 1-7 muestra la estructura de nuestro proyecto Vue.

Figura 1-7. Estructura de archivos de nuestro proyecto learning-vue-app creado

En el directorio raíz del proyecto hay un archivo index.html, que es el punto de entrada para cargar tu aplicación en el navegador. Importa el archivo main.ts utilizando la etiqueta <script> y proporciona el elemento de destino para que el motor Vue cargue la aplicación Vue ejecutando el código en main.ts. Es probable que este archivo permanezca inalterado durante el proceso de desarrollo .

Puedes encontrar todo el código de ejemplo en el repositorio dedicado de Github. Organizamos estos archivos de código por capítulos.

Resumen

En este capítulo, hemos aprendido las ventajas de Vue y cómo instalar las herramientas esenciales para nuestro entorno de desarrollo Vue. También hemos hablado de las Herramientas para Desarrolladores de Vue y de otras herramientas para crear eficazmente un proyecto Vue, como Vite. Ahora que hemos creado nuestro primer proyecto Vue, estamos listos para aprender Vue, empezando por lo básico: la instancia Vue, las directivas incorporadas y cómo maneja Vue la reactividad.

¹ El patrón MVC ayuda a implementar una aplicación separando su estructura en la interfaz de usuario (Vista), los datos (Modelo) y la lógica de control (Controlador). Aunque la Vista y el Controlador pueden ser bidireccionales, sólo el Controlador manipula el Modelo.

² Se conocen comúnmente como paquetes NPM.

³ Facebook se conoce como Meta desde 2021.

⁴ ES modules significa módulos ECMAScript, un estándar popular para trabajar con módulos desde la versión ES6, primero para Node.js y recientemente en los navegadores.

⁵ La recarga en caliente aplica automáticamente los nuevos cambios de código a una aplicación en ejecución sin reiniciar la aplicación ni actualizar la página.

⁶ Interfaz de línea de comandos de Vue.

⁷ JavaScript XML, de uso común en React