Fundamentos

Primeros Pasos…

En primer lugar empezaremos instalando todas las herramientas que nos ayudarán para trabajar con Vue.

Vamos a acceder a la página de nodejs.org y descargaremos la versión LTS, una ves finalizada la instalación abrimos una terminal y escribimnos la instrucción

node --version

Podremos verificar que tenemos instalado y su versión.

Vamos abrir una terminal, pero esta vez con permisos de administrador y ejecutamos la instalación de npm.

npm install -g @vue/cli

Ahora ejecutamos:

vue --version

ya tendríamos nuestro cliente de vue instalador correctamente en nuestro equipo.

Para depurar nuestro código en Vue vamos a instalar la extensión Vue.js Developert Tools

El IDE que vamos a usar es Visual Studio Code, vamos a usar 2 extensiones muy importantes para nuestro trabajo con vue:

¿Qué es Vue?

Es un framework de trabajo que nos va a permitir la realización de interfaces reactivas.

Nos va a incluir una serie de funcionalidades y patrones para poder ejecutar nuestro código de manera más fácil.

Va a construir de manera reactiva, es que a la hora de ejecutar nuestras construcciones, estas van a ir actualizando la información del navegador ssin la necesidad de refrescar el navegador o hacer peticiones en segundo plano como lo hací AJAX.

Arquitectura de Vue

Vue se forma a travez de un patrón MVVM (MODELO-VISTA-VISTA-MODELO), mediante el cual construiremos una serie de componente, cada uno va a ser independiente tanto para su lógica como para su renderizado.

Vue funciona con un DOM Virtual, que se va a encargar de realizar las composiciones para nostros. Cada componente va a esccuhar cada vez que existan modificaciones. Cada vez que uno de esos datos se modifique VUE va a estar igilando esos cambios y automáicmante va a solicitar al renderizado que eso se modifique.

Empezar a trabajar con VUE

Podemos usado a travez de un CDN o CLI

Recomendaria que para proyectos muy pequeños podríamos usar el CDN, por lo contrario lo utilizaríamos a travez de un cliente, seríamos más sólidos y mejor administrado el contenido.

Vamos a crear una carpeta VUE y lo vamos a abrir desde visual Studio Code

Usando la terminar vamos a establecer

vue create helloworld

Instalamos y esperamos…

$ cd helloworld
$ npm run serve

Node_modulos: Carpeta donde se instalas todas las dependencias del proyecto.

Public: Se ubican los archivos publicos de nuestro proyecto incluyendo el punto de entrada y el index.html

SRC: Carpeta de trabajo, acá desarrollaremos nuestros componentes de Vue.

Flujo y Punto de entrada

Index.html <div id=»app»> </div>
Main.TS/JS – Monda App.vue en el div del index.html
App.vue – Muestra el componente helloworld.vue
Hello world es el componente que contiene todo los que estamos viendo en el navegador.

Estructura básica de un componente

Acudimos a app.vue

Tenemos una etiqueta <template></template> ahíva a contener el código HTML

También tenemos un etiqueta <script></script> ahí vamos a crear la lógica a de nuestro programa

<template>
	HTML
</template>

<script lang="ts">
DATA
</script>

<style>
CSS
</style>

<template>
	<h1>HOLA MUNDO</h1>
</template>

<script lang="ts"></script>

<style>
  h1 {
    color: red;
  }
</style>