Categoría: VUE (Página 2 de 2)

Esta página te enseña todo lo necesario para realizar la Instalación de VUE y comenzar a programar en este framework del frontend.

Si quieres aprende a programar en Java gratis sigue este link.

1. Proceso de instalación de VUE

Algo muy bueno cuando se programa en VUE es que el proceso de instalación es bastante sencillo, los componentes necesarios para realizar la instalación son pocos y todos tienen wizard y asistentes para que la instalación sea muy sencilla, sigue estos simples pasos a continuación para lograrlo.

2. Instalando Node JS

La instalación de Node JS también es muy simple, pero se preguntará por qué este componente es necesario para VUE, y básicamente es por dos razones, la primera porque a través de nodejs (que es una tecnología del backend) se puede montar un servidor que permita montar la página web estática del desarrollo hecho en VUE, esto quiere decir que el proceso de compilación de VUE arroja archivos html, js y css que son los que entrega el servidor nodejs al navegador que lo solicite, y la segunda es porque a través de nodejs se tiene acceso a las herramientas de desarrollo como la consola de comandos y la instalación de paquetes de VUE.

Para instalar nodejs básicamente se requiere descargar el ejecutable según tu sistema operativo linux, mac o windows y seguir el wizard o asistente del instalador.

En la siguiente página puedes encontrar el instalador de nodejs.

Para verificar que la instalación esta correcta puedes hacerlo ejecutando un comando que muestre la versión de nodejs instalado. Para hacerlo simplemente ejecuta el siguiente comando en una terminal o consola.

npm -v

3. Instalando Visual Studio

No falta mucho para poder programar en VUE, solamente se requiere de forma adicional un editor de texto y aunque en principio se puede usar un simple block de notas siempre es preferible tener algunas capacidades orientadas al código, uno de los más usados para este propósito y que es gratuito es Visual Studio Code cuya instalación es tan simple como la de nodejs.

En este enlace puedes encontrar el link para descargar el instalador de Visual Studio.

4. Plugins recomendados de Visual Studio

Finalmente, y aunque no es requerido para continuar te recomiendo que instales en Visual Studio en el menú de configuración / extensiones algunos plugins que son muy útiles para poder programar de forma fluida en VUE. Los plugins recomendados son los siguientes:

• VUE 3 Snippets
• Vetur
• npm intellisense

5. Instalando VUE CLI

Luego de haber instalado los componentes anteriores falta simplemente instalar la consola de línea de comandos (CLI, por sus siglas) y esto se logra con un simple comando. Para ello abre una consola o terminal, en el caso de windows basta abrir el programa CMD que lo encuentras en el inicio o una terminal si estas en linux o Mac, y a continuación ejecutar el siguiente comando:

npm install -g @vue/cli

El comando npm es el manejador de paquetes (software) de node y con el podemos instalar cientos de librerías o programas, en este caso estamos instalando la consola de vue usando la opción -g que indica que será instalado de forma global. Una vez terminado ya prodrás crear el primer programa en VUE y empezar a programar.

6. Artículos de Interés

Introducción y Características VUE

Glosario de Términos Informáticos

Listas Enlazadas en Java

Esta página encontrarás una Introducción y Características de VUE que te permitirán desarrollar proyectos de frontend en este framework famoso y versátil, a medida que avance en este mundo de la Programación Web encontrará lo fascinante que es, bienvenido!

Para aprender backend en Java siga este vínculo

1. Aplicaciones en SPA

En esta Introducción y Características de VUE lo primero es entender las Single Page Application o SPA es la forma de programar páginas web interactivas en la actualidad, estas páginas web se caracterizan por no requerir la actualización de todo el contenido cada vez que se realiza una acción por parte del usuario.

Para entender este concepto usemos la siguiente imagen como referencia. Aquí se aprecia que el usuario en el computador de la izquierda realiza una petición HTTP en el momento de escribir una URL, por ejemplo midominio.com, esta URL es traducida por el sistema DNS a una IP la cual a la larga corresponde a una máquina o servidor, este servidor a su vez procesa la solicitud y devuelve el correspondiente a la Página Web usando HTML, JS y CSS.

En las Páginas Web tradicionales cada acción del usuario implica que el servidor envíe toda la Página Web y el navegador tenga que renderizar todo lo cual produce un parpadeo de la página, lo cual además de afectar la experiencia del usuario termina siendo muy ineficiente.

2. Algunas definiciones

Antes de continuar es conveniente contar con algunas definiciones de terminología que se han visto hasta el momento.

• CSS: Hoja de Estilos en Cascada, permite aplicar estilos gráficos para darle diseño a los diferentes componentes que se encuentran en una página web, entre otras acciones comunes se encuentran la definición de estilos de texto, posiciones, colores, etc.
• DNS: Servicio de Nombres de Domino, es un sistema o base de datos que funciona para realizar traducciones de un nombre de dominio por ejemplo google.com a su correspondiente IP a fin de ubicar una máquina en una red de datos como Internet.
• JSON: Notación de Objetos de JS, permite dar formato a datos usando una cantidad mínima de overheading y que a la vez sea fácil de entender por parte de los seres humanos, a diferencia por ejemplo de formatos binarios.
• HTML: Lenguaje de Marcas de Hypertexto es utilizado para escribir Páginas Web y es interpretado por navegadores que luego permitiran mostrar este contenido en el propio navegador
• HTTP: Protocolo de Transferencia de Hypertexto utilizado para transmitir paquetes que en su contenido tendrán HTML correspondiente a páginas web o peticiones de navegadores web.
• JS: Javascript es el lenguaje utilizado por los programadores del frontend para escribir la lógica y el comportamiento de las Interfaces Gráficas de usuario mostradas en los navegadores.
• URL: Localizador Uniforme de Recursos o simplemente la dirección de una página web como google.com
• XML: Lenguaje Extensible de Marcas, es el conjunto universal de todos los lenguajes de marcas que permiten formatear datos a fin de hacerlos legibles tanto por humanos como por máquinas. En estos formatos se puede describir prácticamente cualquier dato o incluso bases de datos.

3. SPA vs Web Tradicional

La principal diferencia entre el SPA y el Web Tradicional queda establecida en la misma forma en que se crean comunica la página web con el servidor y para ellos vamos a entender por partes la comunicación:

1. Lo primero que ocurre es que el usuario navega a una URL ya sea escribiendo la dirección en la barra de direcciones del navegador o dando clic en un enlace.
2. Esta navegación involucra una petición que por ser la primera vez implica diferencia entre la Web Tradicional y SPA, puesto que para ambas se tiene una respuesta consistente en HTML, JS y CSS.
3. En la interacciones posteriores del usuario y el navegador es que se nota la diferencia, mientras que la web tradicional sigue devolviendo HTML, JS y CSS, un página SPA solo devuelve contenido de datos normalmente formateados con JSON o XML haciendo que no se recargue toda la página sino simplemente la zona de la página que requiere la actualización.

Por lo anterior, el paradigma de SPA y programación reactiva implica actualizaciones más rápidas y eficientes, una mejor experiencia del usuario y comunicaciones optimizadas en tamaños y tiempos. La siguiente imagen ilustra una página web actualizándose en un solo punto producto de una respuesta en JSON.

4. Componentes del Framework

Para desarrollar Páginas Web usando SPA se cuenta con muchos framework y uno de los más populares por su facilidad de aprendizaje es VUE que permite trabajar con los lenguajes que el programador de frontend ya conoce como HTML, JS y CSS.

Este framework está diseñado pensando en la experiencia de usuario está muy bien documentado y existen miles de componentes que permiten extenderlo y realizar desarrollos confiables manteniendo la simplicidad necesaria para mantener el código.

La página oficial de VUE la puedes encontrar aquí

5. Artículos de Interés

Listas Enlazadas en Java

Matemáticas

Tipos Nativos Objetos Variables y Constantes en Java