Framework FrontEnd Vue

Misión TIC 2022
Framework - FrontEnd
Misión TIC 2022
Agenda
• Estructura y componentes.
• Navegación y paso de parámetros.
• Consumo de servicios.
Misión TIC 2022
Estructura y componentes
Framework FrontEnd.
Cada día es más difícil crea interfaces web que satisfagan

las necesidades de los clientes cumpliendo con los
atributos de calidad, por tanto se necesitan tecnologías
que nos ayuden en esta tarea y es en este punto donde
se debe elegir entre las diferentes alternativas, ya no
basta con utilizar librerías, en la actualidad existen tres
frameworks muy populares para elegir.
Misión TIC 2022
Un framework es necesario debido a que este es un
conjunto de practicas , conceptos, criterios, herramientas
que además indica las reglas para trabajar siempre
teniendo en cuenta las mejores practicas en el desarrollo
de software.
Misión TIC 2022
la base de estos tres frameworks es muy parecida,

programación reactiva y desarrollo basado en
componentes, esto significa que sin importar la elección
el conocimiento fundamental del uso es intercambiable,
saber VUE va a facilitar el aprendizaje de ANGULAR o
REACT.
Misión TIC 2022
Algunas diferencias.
• Curva de aprendizaje: en este sentido la tecnología que

requiere más esfuerzo es Angular.
• La robustez: pensando en productos de gran escala

realizados angular y react lidera este factor.
• Configuración entorno: no siempre se quiere descargar e

integrar grandes librerías para realizar un simple hola
mundo, VUE esta diseñado para configurar con la simple
agregación de una librería.
Misión TIC 2022
VUE.js es un framework progresivo, porque puede ir

creciendo con el proyecto, se puede iniciar con proyectos
muy básicos e ir incrementando.
La progresividad de VUE.js se puede observar en sus capas.
https://es.vuejs.org/v2/guide/
Misión TIC 2022
Capas
Misión TIC 2022
Capas
1. Render declarativo: es la capa más básica, dibujar elementos en el navegador de manera declarativa.
2. Sistema de componentes: piezas de interfaz que se pueden combinar, ejemplo menú de navegación, formularios, etc.
3. Enrutamiento en cliente: son las URL, tener diferentes direcciones en la aplicación, login, carrito, principal, etc.
4. Manejo del Estado a gran escala: el estado es el conjunto de datos en un momento especifico, ejemplo un carrito de
compras en el momento que se agrega productos el carrito cambia de estado y lo guarda sin importar por donde este
navegando el usuario.
5. Empaqueto del proyecto: VUE tiene un build system que hace fácil la tarea.
6. Persistencia de Datos: tener los datos que se mantienen de una aplicación.

Misión TIC 2022
En Vue, un componente es esencialmente una instancia de Vue con

opciones predefinidas
Misión TIC 2022
MPA y SPA.
Las Multi Page Application hacen Las Single Page Applications que son arquitecturas
referencia a Arquitecturas Web en el que el servidor únicamente dispone de una
Clásicas en donde uno dispone de página y carga todos los estilos y todos los formatos
múltiples páginas HTML y cada una en el cliente y este a partir de ese momento
carga diferentes contenidos únicamente pide datos al servidor y va mostrando
apoyándose en la navegación contra diferentes componentes al usuario que existen en la
el servidor. mega página. Pero nunca navega entre páginas.
Misión TIC 2022
VUE router.
Al desarrollar una aplicación de una sola página con Vue, el

navegador no realiza una solicitud al servidor en cada cambio de URL.
El navegador solo hace una solicitud al servidor para la carga inicial de
la página y cuando la URL cambia depende de Vue determinar qué
contenido debe ser mostrado.
En Vue, vue-router es la biblioteca de enrutamiento oficial del lado

del cliente que proporciona las herramientas necesarias para asignar
los componentes de una aplicación a diferentes rutas de URL del
navegador.
Misión TIC 2022
VUE router.
Al desarrollar una aplicación de una sola página con Vue, el

navegador no realiza una solicitud al servidor en cada cambio de URL.
El navegador solo hace una solicitud al servidor para la carga inicial de
la página y cuando la URL cambia depende de Vue determinar qué
contenido debe ser mostrado.
En Vue, vue-router es la biblioteca de enrutamiento oficial del lado

del cliente que proporciona las herramientas necesarias para asignar
los componentes de una aplicación a diferentes rutas de URL del
navegador.
Misión TIC 2022
VUE Bootstrap.
Existe una librería especializada

para que VUE pueda trabajar
con Bootstrap, permitiendo
usar componentes Bootstrap en
un proyecto gestionado por
VUE
Misión TIC 2022
Uso a través de CDN,.
Referencia remota: la forma más fácil y básica de utilizar VUE, es traerlo a través de un
CDN, relacionando la ruta, entonces se hace la carga a través de internet.
Para el ejemplo crearemos dos archivos:

• Principal.html (pagina básica HTML).
• Principal.js (archivo js para interactuar con el HTML)
Misión TIC 2022
Uso a través de CDN.
Misión TIC 2022
Probando la reactividad.
Misión TIC 2022
IF: Vue cuenta con el condicional IF para
hacer validaciones y tomar decisiones
de acuerdo al resultado de la validación,
se puede utilizar la etiqueta template
para afectar varias etiquetas.
Misión TIC 2022
For: VUE cuenta con el ciclo for para
realizar tareas que requieran repetición.
Ejemplo listar un conjunto de elementos
Misión TIC 2022
Eventos: Para permitir que los usuarios

interactúen con la aplicación, podemos
usar la directiva v-on para adjuntar
escuchas de eventos que invocan
métodos en nuestras instancias de Vue:
Misión TIC 2022
Eventos: Vue también proporciona la

directiva v-model que hace que el
enlace bidireccional entre los controles
de los formularios y el estado de la
aplicación sea muy sencilla.
Misión TIC 2022
Instalación de herramientas
Instalación: para instalar los paquetes de

VUE es necesario tener instalado Node.js
https://nodejs.org/es/download/
Misión TIC 2022
Instalación: Se recomienda instalar los

valores por defecto.
Misión TIC 2022
Instalación: Se recomienda instalar los

valores por defecto.
Misión TIC 2022
VUE CLI.
Tiene como objetivo ser la línea de base

de herramientas estándar para el
ecosistema Vue. Garantiza que las diversas
herramientas de compilación funcionen
sin problemas junto con valores
predeterminados razonables para que
pueda concentrarse en escribir su
aplicación en lugar de pasar días luchando
con configuraciones.
Misión TIC 2022
Instalación:
luego de tener node instalado se procede con la

instalación de VUE - CLI de acuerdo como lo
indica la pagina oficial.
https://cli.vuejs.org/guide/installation.html
Se puede comprobar la instalación de VUE con el

comando vue –versión.
Misión TIC 2022
Misión TIC 2022
Creación de proyecto:
Para crear los proyectos es necesario

seguir los siguientes pasos.
1. Ejecutar el código de creación.

2. Seleccionar la opción de configuración.
3. Seleccionar las herramientas para el
proyecto.
Misión TIC 2022
En este momento se ha creado el
proyecto, si abrimos la carpeta podemos
ver los archivos
Misión TIC 2022
Componente
Aplicación principal
Configuración inicial
Misión TIC 2022
Para lanzar la aplicación se ingresa a la carpeta del

proyecto y se utiliza el comando npm run serve
Misión TIC 2022
Corriendo el servidor.
Para lanzar el servidor y probar existen dos

opciones.
• Desde la consola escribir npm run serve,

desde esta opción se puede seleccionar el
puerto.
• Desde la consola escribir vue ui, e ir a la

administracion de proyectos y lanzar el
servidor
Misión TIC 2022
Se ingresa al navegador y se
busca la dirección y el puerto para
ver la aplicación web, en este
caso se muestra una pagina por
defecto.
Misión TIC 2022
probando el proyecto:
Para entender el funcionamiento del proyecto es

necesario revisar el componente que se ha
generado automáticamente.
En la imagen de la derecha se puede observar el

template (obligatorio en todo componente) que
específicamente hace referencia al código HTML
del componente
Misión TIC 2022
En la imagen se puede observar el script que

específicamente hace referencia al código
javascript con la configuración del componente
Misión TIC 2022
En la imagen de la derecha se puede

observar el style que específicamente
hace referencia al código CSS del
componente.
El atributo scope hace referencia a que los
estilos solo serán aplicados a este
componente.
Misión TIC 2022
El app.vue es el componente principal, y

obsérvese que esta enrutando hacia las vistas, las
cuales utilizan componentes.
Misión TIC 2022
Revisando el main.js se puede observar que ahí

esta definida la instancia de vue. En esta se esta
haciendo una referencia a store y renderizando la
aplicación sobre un id llamado app que se podrá
encontrar en el index.html
Store: son aquellas piezas de código que

configuraban vuex y que permitían gestionar el
estado global de la aplicación
Misión TIC 2022
Revisando el store se puede observar que hay un

archivo index.js en el cuál se define el estado las
mutaciones y los módulos.
Misión TIC 2022
Navegación y paso de parámetros.

Creando componentes básicos.
En la carpeta components se pueden crear los

componentes unitarios que se requieran, ejemplo
un formulario, un pie de pagina, una barra de
navegación para luego con estos componentes
conformar una vista.
Para este ejemplo se crearan do componentes un

formulario y una tabla.
Misión TIC 2022
Creación del componente formulario cuidador.
Definiendo dentro del template los elementos

del formulario, el script vacío y el style con
algunos estilos para el componente.
Misión TIC 2022
Creación del componente tabla cuidador.
Definiendo dentro del template los elementos

de la tabla, el script vacío y el style con algunos
estilos para el componente.
Misión TIC 2022

Creando componentes de vista.
A partir de los componentes se puede

conformar una vista en la carpeta views, que
también es un componente, a dicha vista hay
que declararla en el vue- router para poder
definir las rutas.
Misión TIC 2022
Ajustando el componente principal.
Para realizar el acoplamiento con la vista principal

llamada app, se debe declarar un router link para
cada una de las vistas, en esta interfaz principal se
pueden agregar las etiquetas que sean necesarias
y su respectivo estilo.
Misión TIC 2022
Le podemos modificar el html y css a la principal

para personalizar
Misión TIC 2022
Le podemos modificar el html y css a la principal

para personalizar
Misión TIC 2022
Consumo de servicios.
Axios.
Axios es un cliente HTTP basado en promesas

para node.jsy el navegador. Es isomórfico (=
puede ejecutarse en el navegador y en nodejs
con la misma base de código). En el lado del
servidor, usa el httpmódulo nativo node.js ,
mientras que en el cliente (navegador) usa
XMLHttpRequests.
Misión TIC 2022
Instalación.
Se realiza la instalación
estando dentro de la carpeta
del proyecto.
Misión TIC 2022
Politicas Cors.
CORS (Cross-Origin Resource Sharing) es un

mecanismo o política de seguridad que
permite controlar las peticiones HTTP
asíncronas que se pueden realizar desde un
navegador a un servidor con un dominio
diferente de la página cargada originalmente.
Este tipo de peticiones se llaman peticiones de
origen cruzado (cross-origin).
https://lenguajejs.com/javascript/peticiones-http/cors/
Misión TIC 2022
Politicas Cors.
La modificación de políticas cors se realiza en el backend, dando permisos a los

dominios que se permite acceder.
Misión TIC 2022
Teniendo Axios instalado se utiliza la sección de
JavaScript para consumir los servicios.
En la imagen se puede ver el script para el componente

formulario.
Misión TIC 2022
Se deben realizar ciertas modificaciones al
HTML para poder enlazar con las variables y
funciones declaradas en la sección de
JavaScript.
Misión TIC 2022
En la imagen se puede observar tanto el
script como el HTML para el componente
tabla.
Misión TIC 2022
Se realiza el lanzamiento de los servidores
locales de BacKEnd y FrontEnd
Misión TIC 2022
Se observa la relación entre Back y Front,
En donde la tabla contiene los registro
correspondientes a la base de datos y el
formulario brinda la posibilidad de guardar y
eliminar registros.
Misión TIC 2022
¡¡Gracias!!

Framework FrontEnd Vue

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Framework FrontEnd Vue

Cargado por

Copyright:

Formatos disponibles

Misión TIC 2022

Cada día es más difícil crea interfaces web que satisfagan

la base de estos tres frameworks es muy parecida,

• Curva de aprendizaje: en este sentido la tecnología que

• La robustez: pensando en productos de gran escala

• Configuración entorno: no siempre se quiere descargar e

VUE.js es un framework progresivo, porque puede ir

La progresividad de VUE.js se puede observar en sus capas.

6. Persistencia de Datos: tener los datos que se mantienen de una aplicación.

En Vue, un componente es esencialmente una instancia de Vue con

Al desarrollar una aplicación de una sola página con Vue, el

En Vue, vue-router es la biblioteca de enrutamiento oficial del lado

Al desarrollar una aplicación de una sola página con Vue, el

En Vue, vue-router es la biblioteca de enrutamiento oficial del lado

Existe una librería especializada

Para el ejemplo crearemos dos archivos:

Eventos: Para permitir que los usuarios

Eventos: Vue también proporciona la

Instalación: para instalar los paquetes de

Instalación: Se recomienda instalar los

Instalación: Se recomienda instalar los

Tiene como objetivo ser la línea de base

luego de tener node instalado se procede con la

Se puede comprobar la instalación de VUE con el

Para crear los proyectos es necesario

1. Ejecutar el código de creación.

Para lanzar la aplicación se ingresa a la carpeta del

Para lanzar el servidor y probar existen dos

• Desde la consola escribir npm run serve,

• Desde la consola escribir vue ui, e ir a la

Para entender el funcionamiento del proyecto es

En la imagen de la derecha se puede observar el

En la imagen se puede observar el script que

En la imagen de la derecha se puede

El app.vue es el componente principal, y

Revisando el main.js se puede observar que ahí

Store: son aquellas piezas de código que

Revisando el store se puede observar que hay un

Navegación y paso de parámetros.

En la carpeta components se pueden crear los

Para este ejemplo se crearan do componentes un

Navegación y paso de parámetros.

Creación del componente formulario cuidador.

Definiendo dentro del template los elementos

Navegación y paso de parámetros.

Creación del componente tabla cuidador.

Definiendo dentro del template los elementos

Navegación y paso de parámetros.

A partir de los componentes se puede

Navegación y paso de parámetros.

Ajustando el componente principal.

Para realizar el acoplamiento con la vista principal

Navegación y paso de parámetros.

Ajustando el componente principal.

Le podemos modificar el html y css a la principal

Navegación y paso de parámetros.

Ajustando el componente principal.

Le podemos modificar el html y css a la principal

Axios es un cliente HTTP basado en promesas

CORS (Cross-Origin Resource Sharing) es un

La modificación de políticas cors se realiza en el backend, dando permisos a los

En la imagen se puede ver el script para el componente

También podría gustarte