Ediciones ENI Editorial | líder en informática
Framework Vue3.js
Presentación de Vue3.js
Como indica el sitio web http://es.vuejs.org, el framework Vue3.js respeta los estándares habituales (HTML, CSS y JavaScript), al igual que herramientas como Svelte y React, que hemos estudiado en los capítulos anteriores.
Sin duda, los dos principales competidores en este segmento de herramientas de desarrollo web rápido son React.js y Vue3.js.
Compararlos es analizar dos de los frameworks de JavaScript front-end más populares.
Sin embargo, en el sector del desarrollo, en constante evolución, no dejan de surgir nuevas alternativas que amplían la oferta de herramientas.
La elección final depende de las necesidades del cliente y de las competencias del equipo.
1. Qué tienen en común React.js y Vue3.js
Al comparar React.js y Vue3.js, es crucial entender primero lo que tienen en común antes de ver sus diferencias. En primer lugar, ambos son bibliotecas o marcos de JavaScript utilizados para el desarrollo front-end. Se basan en el modelo DOM virtual, lo que garantiza un buen rendimiento para aplicaciones web de una sola página.
React.js explota el DOM virtual para crear una réplica virtual de la interfaz de usuario, almacenándola en memoria para sincronizarla con el DOM real. Del mismo modo, Vue.js utiliza el DOM virtual para una ejecución rápida.
En cuanto a los ámbitos de aplicación, React se utiliza para desarrollar aplicaciones...
Aplicaciones básicas de Vue3.js
En esta sección, el enfoque didáctico consiste en desarrollar una serie de nueve aplicaciones (o proyectos) presentadas en orden progresivo de dificultad.
La temática será común a todos estos desarrollos, y como en otros capítulos, utilizaremos el soporte de un minijuego de datos sobre coches.
1. Aplicación "eni_vue3js_lista_coches_01.html"
El reto de esta primera aplicación es mostrar, sin ningún esfuerzo particular de presentación, un conjunto de datos compuesto por tres coches (deportivos) caracterizados por una única propiedad:
-
BMW M1
-
Ferrari Testarossa
-
Porsche 964
Para todas estas aplicaciones básicas, se presentará el código fuente. El código incluirá comentarios y explicaciones adicionales "fuera de código".
Si visualiza la primera aplicación en el navegador de su elección (personalmente utilizaremos Google Chrome), obtendrá el siguiente resultado:
Echemos un vistazo al código fuente completo antes de comentar esta aplicación con más detalle más adelante. Este primer código se presentará a continuación con las líneas numeradas para facilitar el seguimiento de las explicaciones.
1. <!DOCTYPE html>
2.
3. <html lang="es">
4.
5. <!--
6. Nombre del script: eni_vue3js_lista_coches_01.html
7. Autor: Christian VIGOUROUX - Ediciones ENI
8. Fecha de creación: 21/05/2024
9. Fecha de última modificación: 21/05/2024
10. Objeto: Lista de coches
11. -->
12.
13. <!-- Encabezado de página -->
14. <head>
15.
16. <!--...Aplicaciones Vue3.js conectadas con MySQL
En esta sección, veremos cómo conectar aplicaciones Vue3.js con un dispositivo de persistencia de datos. Para ello, utilizaremos el sistema de gestión de bases de datos (SGBD) MySQL. La versión de este SGBD será local. Es muy sencillo modificar las aplicaciones para que puedan utilizar una versión "online" de este mismo SGBD MySQL modificando los identificadores de conexión.
Si desea probar en su configuración personal de Windows los distintos ejemplos que presentamos, puede instalar la suite EasyPHP, por ejemplo, para disponer de una versión local del SGBD MySQL.
El sitio de descarga de la suite EasyPHP está disponible en: https://www.easyphp.org/download.php
En nuestro caso, nos contentamos con instalar la versión 14.1 VC11 de esta suite EasyPHP, una versión antigua pero fácil de desplegar.
En la serie de aplicaciones Vue3.js conectadas al SGBD MySQL, el uso que se haga del framework Vue3.js será diferente al que hemos visto en las aplicaciones básicas que hemos estudiado hasta ahora.
En las aplicaciones anteriores de este capítulo, que consistían en un único archivo HTML con código JavaScript, solo se realizaba una llamada a la versión del framework Vue3.js disponible online, y esto se hacía mediante la directiva <script src="https://unpkg.com/vue"></script>.
Como recordatorio, Vue3.js es un framework JavaScript que se utiliza principalmente para crear aplicaciones web interactivas y reactivas. Se puede utilizar de diferentes maneras, dependiendo de las necesidades de su proyecto y de sus preferencias de desarrollo.
Hay tres formas comunes de utilizar Vue3.js:
-
Content Delivery Network (CDN): utilización de una etiqueta script directamente en una página HTML (<script src="https://unpkg.com/vue"></script>).
-
Node.js Package Manager (NPM): utilización del framework en un proyecto Node.js a través de npm.
-
CLI: uso utilización de la CLI (interfaz de línea de comandos) de Vue3.js.
Echemos un vistazo más de cerca a estas tres formas de utilizar Vue3.js.
1. Content Delivery Network (CDN)
En CDN (Content Delivery Network), el framework Vue3.js se llama a través de una etiqueta <script> directamente en una página HTML. El CDN aloja la biblioteca Vue3.js...