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

Esta sección detalla la instalación y uso de un framework de Componentes gráficos llamado Vuetify aplicado en VUE JS el cual nos permitirá diseñar nuestras aplicaciones Web de forma más ágil teniendo presente componentes prediseñados.

Para aprender a programar en Java sigue este link

En la página principal de vuetify se encuenta toda la documentación de todos los componentes y las diferentes propiedades que se requieren para hacer diseños.

Página principal de Vuetify

1. Instalación y configuración

Instalar Vuetify dentro de nuestro proyecto VUE JS es bastante sencillo, solamente debes incluirlo aprovechando que ya tenemos el comando de la consola o CLI de VUE, para hacerlo utiliza el siguiente comando.

vue add vuetify

Una vez instalado vuetify se reemplazará el archivo App.vue y HelloWorld.vue el cual contendrá ahora archivos que estan basados en vuetify. Adicionalmente cuando se instaló vuetify se creó un archivo con la configuración donde se pueden encontrar algunas propiedades generales y los nombres de los colores que se utilizarán en la aplicación. El siguiente código muestra un extracto de este archivo llamado vuetify.js el cual está ubicado en la carpeta plugins.

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
      options: {
        customProperties: true,
      },
    themes: {
      light: {
        primary: '#007BFF',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
      },
    },
  },
  icons: {
    iconfont: 'md',
  },
});

En el caso de los iconos podemos utilizar diferentes fuentes como md para Material Design o Font Awesome. En la web de vuetify se encuentran los detalles para instalar diferentes fuentes de iconos.

Instalar fuentes de iconos

2. Primeros pasos con Vuetify

En Vuetify tenemos muchos componentes y diferentes formas de aplicar estilos y maquetar nuestra aplicación en el fronted, para iniciar es importante saber que todos los componentes de vuetify comienzan con <v->. En el siguiente código se hará uso de los v-toolbar, v-toolbar-title y v-content para establecer una maquetación inicial básica de nuestra aplicación.

<template>
  <v-app>
    <v-app-bar color="primary" dark app>
        <span>{{ titulo }}</span>
    </v-app-bar>

    <v-content>
      <home />
    </v-content>
  </v-app>
</template>

<script>
import Home from '@/views/Home.vue'

export default {
  name: 'App',
  component: { Home },
  data: () => ({
    titulo: "Demo App"
  }),
};
</script>

Aquí es importante observar que el uso de la etiqueta dark permite poner el color de texto en blanco para que resalte según el color primario que estemos utilizando.

3. Maquetación

En vuetify se recomiendo seguir la siguiente jerarquia de contendores:

• v-container: sirve para hacer la distribución de la pantalla en general.
• v-layout: sirve para hacer alineaciones tanto de forma horizontal como vertical.
• v-flex: que permite seleccionar las partes de la pantalla a utilizar.

En el siguiente ejemplo se muestra el uso de estos contenedores para la maquetación. Los atributos fluid y fill-height permiten que el contenedor se centre horizontalmente y que ocupe todo el alto de la página respectivamente, de forma similar aplican las opciones de layout justify-center align-center.

En cuanto a las opciones de flex, por defecto divide la pantalla en 12 casillas y podemos usar particiones entre 1 y 12 para determinar qué espacio ocupará nuestro componente. Adicional a lo anterior, existen los breakpoint que son tamaños preconfigurados: xs, sm, md, lg, xl que corresponden a tamaños de pantallas.

<template>
  <v-app>
    <v-app-bar color="primary" dark app>
        <span>{{ titulo }}</span>
    </v-app-bar>
    
    <v-main>
      <v-container>
        <create-user></create-user>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
  import CreateUser from './components/CreateUser.vue'
  
  export default {
    name: 'App',
    components: { CreateUser },
    data: () => ({
      titulo: "Demo App"
    }),
  };
</script>

<template>
  <v-layout
    justify-center
    align-center
  >
    <v-flex xs4>
      <v-card class="elevation-12">
        <v-toolbar color="primary" dark card>
          <v-toolbar-title>
            Sign Up
          </v-toolbar-title>
        </v-toolbar>
        <v-card-text>
          <v-text-field label="mail"></v-text-field>
          <v-text-field
            label="password"
            type="password"
          ></v-text-field>
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>

La figura 1 muestra este ejemplo ejecutandose.

4. Helpers

En vuetify existen diferentes ayudantes de clases que permiten realizar tareas comunes como especificar los márgenes o los padding a través de clases. Por ejemplo, si se desea hacer un margin en todos los bordes de 2 pixeles se puede usar la clase ma-2. En los siguiente link se proporciona un acceso a los helpers más comunes.

Espaciado de vuetify

Elevation

Tamaños de componentes y responsive

Fuentes para incorporar en nuestra aplicación

5. Propiedades útiles

Algunas propiedades (props) útiles son las siguientes:

• column: aplicable a un layout indica que el layout ocupa una columna, por defecto los layout tienen la propiedad row establecida a true. Esto nos sirve para ubicar el contenido completo de un layout de forma que ocupe todo el ancho de la página.
• wrap: aplicada a un layout permite que los componentes dentro del layout se acomoden en columnas cuando el contenido ya no quepa en una sola fila.
• text-xs-center: alinea el texto al centro para la resolución más pequeña que sería la pantalla de un celular.
• text-shadow: aplicable a los estilos CSS permite especificar sombras que dan estilo a los textos.

6. Artículos de Interés

Es común requerir que nuestra SPA (Single Page Application) requiera destinar espacios para ser llenados de forma dinámica o dependiendo de alguna condición lógica, para ello podemos usar los Slot y Componentes dinámicos en VUE que ayudan a construir nuestra página web de forma ordenada.

Para aprender backend en Java siga este vínculo

1. Uso de Slot y llenado de espacios en VUE

Los slot permiten definir espacios en nuestros componentes que serán especificados como se llenarán desde el componente padre que utilice importe el componente hijo, de esta forma el padre puede indicar como llenar un espacio HTML al hijo dando gran versatilidad ya que el mismo componente puede tener un espacio que es llenado de forma diferente en función del padre donde se encuentre importado.

Crear un slot es algo muy simple y consta de dos pasos, el primero es definir en el componente hijo la zona HTML que dedicaremos para que quien use el componente lo defina. Esto se muestra en el siguiente código.

<template>
    <div>
      <transition name="efecto" mode="out-in">
        <div id="nav" class="tarjeta" :key="indice">
          <span :key="indice" > {{ datos[indice] }} </span>
        </div>
      </transition>
      <div>
        <slot name="slot1"></slot>
      </div>
    </div>
  </template>

El segundo paso consiste en especificar la sección HTML que llenará el slot en el lugar donde se use este componente hijo. El siguiente código muestra un ejemplo de esta especificación. Observe que el nombre del slot en este caso se usa sin comillas.

<template>
  <div id="nav" class="principal">
    <span>App </span>
    <span>{{ login }}</span>
    <br/>
    <span>Age {{ age }}</span>
    <tarjeta-datos>
      <template v-slot:slot1>
        <span>Componente en Slot</span>
      </template>
    </tarjeta-datos>
  </div>
</template>

2. Manejo de Componentes dinámicos en VUE

Para especificar un componente dinámico en VUE es suficiente con utilizar la etiqueta component y especificar en su atributo is cuál será el componente que se utilizará, esto resulta equivalente a dejar el componente fijo en el código pero con la ventaja que podemos utilizar una variable de la data para establecer el valor del componente y lograr que este cambie en función del valor de la variable.

En el ejemplo siguiente vemos como la variable actual, recibe el valor del nombre del componente, tenga presente que de cualquier manera el nombre del componente debe ser el mismo que se vaya a utilizar en el HTML y que debe ser previamente importado y definido en la sección components de la instancia de VUE.

<component :is="actual"></component>

import TarjetaDatos from './components/TarjetaDatos.vue';

export default {
  components: { TarjetaDatos },
  name: 'App',
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3),
      actual: 'tarjeta-datos'
    }
  },

3. Artículos de Interés

Cuando programamos en el front indiscutiblemente es necesario aprender a generar animaciones que mejoren la experiencia del usuario, en la sección de transiciones vimos como podemos manejar efectos para la aparición de elementos, estas transiciones se complementan muy bien cuando utilizamos Animaciones usando Keyframes CSS que permitiran una flexibilidad completa en nuestra animación

Para aprender backend en Java siga este vínculo

1. Definición de estilos de animación keyframes CSS

Lo primero antes de construir nuestras Animaciones es definir las keyframes CSS, lo cual es muy simple, tan solo con utilizar la etiqueta @keyframes indicar un nombre y definir los estados inicial y final de nuestra animación, tal como se muestra en el código de la siguiente sección.

@keyframes efecto-in {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes efecto-out {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

Aquí es importante notar que existen muchas transformaciones y que la que se ha escogido en este ejemplo recibe un valor de 1 o 0 equivalente a 100% o 0%.

2. Agregado de Animaciones usando keyframes CSS a las transiciones

Para que nuestros @keyframes se puedan usar como animaciones es necesario asociarlos a las transiciones de forma muy similar a como se definió la propia transición.

.efecto-enter {
  opacity: 0;
}

.efecto-enter-active {
  transition: opacity 1s ease-out;
  animation: efecto-in 0.4s ease-out forwards;
}

.efecto-leave-active {
  transition: opacity 0.5s ease-out;
  animation: efecto-out 0.2s ease-out forwards;
  opacity: 0;
}

Note que la transición de salida leave-active debe especificar en este caso el valor de la propiedad opacity. Adicionalmente que la animación estar repetida en bucles infinitos y para evitarlo se hace uso de la directiva forwards.

Finalmente, a nivel del HTML se da un cambio pequeño en el cual podamos animar por completo el div que contiene la información, a su vez este div ( o el elemento sobre el que recaiga la animación debe tener un id para poder aplicarlo.

<transition name="efecto" mode="out-in">
  <div id="nav" class="tarjeta" :key="indice">
    <span :key="indice" > {{ datos[indice] }} </span>
  </div>
</transition>

3. Especificación de propiedades según avance de animación

Un último punto útil cuando hacemos animaciones usando @keyframes CSS es que podemos especificar diferentes valores del avance de la animación, cuando hemos usado from y to estos se entienden como 0% y 100% respectivamente, pero podemos especificarlo explicitamente y así indicar un valor de avance de la transformación a medida que la animación ocurre.

En el siguiente ejemplo se exagera un poco la transformación en Y justo antes que llegue que termine la animación.

@keyframes efecto-in {
  0% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1.4);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes efecto-out {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

Estéticamente, estas animaciones exageradas deben usarse con cuidado en sitios específicos y aplicarlas una sola vez para que no cansen al usuario y su experiencia no se vea impactada.

4. Artículos de Interés

Cuando programamos en VUE es importante conocer los Hooks y Ciclo de Vida de Componentes que permiten realizar acciones en los diferentes momentos de la ejecución de un programa, en este artículo se muestra todo lo que tienes que saber para dominar los diferentes hooks de VUE.

Si quieres aprender a programar en Java sigue este link.

1. Ciclo de Vida de los Componentes

En la siguiente imagen se puede observar los diferentes estados de un componente en VUE.

Siempre que VUE carga un componente sigue este patrón, y puede observar como cada estado esta precedido de uno anterior llamado before, por ejemplo antes de ser creado un componente se leen los datos y antes de ser montado se lee la plantilla o template, de forma similar y quizás el más importante por comprender es que antes que se actualicen los datos estos serán actualizados en el DOM o página web. y el ciclo en la actualización ocurre cada vez que un dato es cambiado, por eso la sección de data es tan importante porque las variables que se definen allí permiten cambiar el estado de los componentes y refrescarlos en la página web.

2. Hooks disponibles en los Componentes

Cada uno de los estados del ciclo de vida de los componentes en VUE tiene un hook, en este caso un método especial que es definido al mismo nivel de la data, el nombre o los métodos y que hace parte de la instancia de VUE como tal, estos métodos pueden ser sobreescritos ya sea uno o varios para cambiar el comportamiento o definir acciones que se quieran realizar en alguno de los momentos en el Ciclo de Vida de los Componentes en VUE.

El siguiente código muestra la sección de script de un componente VUE con la definición de todos los Hooks.

  <script>
  export default {
    name: 'Entrada',
    beforeCreate() {
      console.log('beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount');
    },
    mounted() {
      console.log('mounted');
    },
    beforeUpdate() {  
      console.log('beforeUpdate');
    },
    updated(){
      console.log('updated');
    },
    beforeDestroy() {
      console.log('beforeDestroy');
    },
    destroyed() {
      console.log('destroyed');
    }
  }
  </script>

3. Artículos de Interés

En este artículo exploraremos las principales secciones de la instancia de VUE como son la Sección Data Computed Methods y Render Declarativo en VUE y sae explicara el uso de cada uno de ellos en la construcción de aplicaciones frontend.

Si quieres aprender a programar en backend java sigue este enlace.

1. Atributo name

El atributo name se configura en la instancia de VUE y permite identificar el componente, esto es especialmente útil en el momento en que se visualiza en el depurador como vue devtools.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada }
}
</script>

2. Función Data

Vamos a iniciar en este estudio de Data Computed Methods y Render Declarativo en VUE por la función Data permite devovler valores a la vista y utilizarlos para su procesamiento, se puede entender como un conjunto de variables que serán utilizadas entre la sección HTML y la sección script y que permitirán escribir la lógica de nuestra aplicación. En el siguiente fragmento de código se muestran algunas variables que se han definido, note también como estas variables deben obligatoriamente construirse como un JSON que será devuelto por la función data y que estas variables pueden ser de diferentes tipos por ejemplo textos o números.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      age: 30
    }
  }
}
</script>

3. Render Declarativo

Teniendo en cuenta que la función data devuelve un JSON con información que podemos utilizar en la sección HTML existe una forma muy sencilla de poder incrustar los valores de estas variables en algún punto de nuestra página web, para ello basta con usar el denominado Render Declarativo que consta de un par de llaves y la interior de estas el nombre de la propiedad del JSON devuelto por data, siguiendo el ejemplo anterior a continuación se muestra la sección HTML en la cual se usa el valor de la propiedad login.

<template>
  <div id="nav" class="principal">
    <span>App</span>
    <span>{{ login }}</span>
    <Entrada></Entrada>
  </div>
</template>

4. Métodos Computed

Similar a la sección Data, la sección Computed en VUE permitirá de forma muy similar a las propiedades de data, devolver un valor producto de algún calculo necesario. Supongamos el calculo de la edad, para lo cual a la fecha actual debemos restar la fecha de nacimiento, esto se logra de forma muy sencilla estableciendo una función, que a la larga será una función tipo get, en la sección computed de la instancia de VUE.

El código siguiente muestra tanto la sección javascript como la sección HTML. Algo que también es importante y se puede apreciar en este ejemplo es que cuando usamos variables de data en las sección javascript debemos usar la palabra this, a diferencia de lo que ocurre en la sección HTML en donde no es necesario el uso de esta palabra clave.

Note también que para hacer uso de un método computed basta usarlo como si fuera una propiedad de la data, tal como se vio en la sección anterior.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  }
}
</script>

<template>
  <div id="nav" class="principal">
    <span>App</span>
    <span>{{ login }}</span>
    <span>Age {{ age }}</span>
    <Entrada></Entrada>
  </div>
</template>

Otro ejemplo de método Computed en VUE permite mostrar algunas de las características de manipulación de texto, en el cual podemos usar el comodín $ y llaves para hacer referencia a una variable y facilitar las concatenaciones de texto.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  }
}
</script>

5. Methods personalizados en VUE

La sección Methods en VUE son muy parecidos a las funciones de Computed o Data solamente que usamos estos de forma más extendida para realizar operaciones, recibir datos y procesarlos y dividir en general los algoritmos en trozos más manejables.

En el siguiente código se muestra un ejemplo de un método utilizado para calcular la edad pero en esta ocasión recibiendo un parámetro.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  },
  methods: {
    computedAge(date) {
      let currentDate = new Date();
      let diff = currentDate - date;
      return diff;
    }
  }
}
</script>

6. Artículos de Interés

La Depuración de Código en VUE JS es muy importante puesto que permite encontrar errores de forma rápida y incluso obtener una mejor compresión del funcionamiento de tu página web. Algo paradojico es que la mayoría de personas que programan en el front end no saben realizar depuración (debug) ya que resulta más común realizar depuración a nivel de backend, sin embargo las herramientas disponibles para depurar en back son practicamente las mismas que en el front.

Si quieres aprender a programar en Java sigue este enlace.

1. Qué es depurar?

La Depuración es la técnica con la cual los programadores encuentran errores en su código, estas herramienta permite que el programador detenga la ejecución en un punto del código y revise valores de variables e incluso ejecute el programa paso a paso a fin de observar que esta haciendo el código, que bifurcaciones esta tomando o cuantas veces se esta repitiendo un ciclo.

2. Instalación de VUE Devtools

Lo primero que debemos hacer para depurar en VUE es descargar una extensión, en estas páginas se manejará el navegador Gooogle Chrome, sin embargo cualquier otro navegador como Firefrox o Edge podrá servir para depurar.

En este link puedes encontrar el enlace directo para descargar la extensión vue.js devtools

Una vez instalado podrás encontrar todas las opciones de depuración cuando trabajes con tus páginas en VUE.

3. Usar vuejs devtools

Una vez instalado vue js devtools, y estando en una página vue podemos abrir las herramientas de desarrollador de Chrome, aunque hay muchas formas una sencilla y rápida es simplemente dar click derecho y elegir la opción Inspeccionar, lo cual abre las herramientas de depuración y podemos ubicarnos en la pestaña VUE para las diferentes opciones de VUE.

En esta pestaña se puede tener acceso a las siguientes herramientas:

• Inspector: permite ver las opciones de componentes, vuex y routes de la aplicación vue.
• Timeline: muestra la ejecución de métodos y de eventos que se han generado en la aplicación.
• Components: muestra la jerarquía de componentes de la página y permite entender su distribución a fin de determinar si la página esta correctamente creada.
• Vuex: este es el almacén de datos de nuestra aplicación VUE que nos permite también interactuar con algunos métodos y lógica necesaria en nuestra aplicación.
• Routes: permite ver las rutas de la aplicación a fin d determinar que la navegación esta bien diseñada y funciona correctamente.

4. Otras opciones de depuración

Las opciones anteriores de VUE se pueden mezclar con las opciones tradicionales de depuración y herramientas de desarrollo de Chrome, algunas de las más importantes y su funcionalidad son las siguientes.

4.1. Elements

Esta pestaña permite visualizar el contenido HTML que se esta mostrando en la página web, lo más interesante aquí es que nos podemos ubicar en una parte de la página para navegar directamente al HTML o al revés pararnos en una parte del HTML y visualizar el componente en la página el cual se iluminará. También podemos cambiar el contenido del HTML o de los CSS y ver como se comportan en la página, esto último es muy útil puesto que luego podemos volver sobre nuestro código e incorporar los ajustes que hayamos hecho en esta pestaña del devtools.

4.2. Console

La consola nos permite ejecutar código javascript, inspeccionar variables y sobre todo observar mensajes que este dejando la aplicción, por esto los programadores habitualmente dejan mensajes en la consola y pueden verificar si la aplicación esta realizando lo que se espera.

4.3. Network

La sección de red es muy importante puesto que muestra todas las peticiones que la página intercambia, aquí podemos visualizar la forma en que se realizan las peticiones incluyendo los encabezados y las respeustas que da el servidor para cada petición, también es muy útil para saber si la página esta pidiendo la información correcta y si el servidor esta entregando lo esperado. Otro uso útil de esta pestaña es verificar los tiempos y tamaños de las peticiones así sabremos si una petición esta poniendo lenta la página. Finalmente, la información que arroja esta pestaña sirve para determinar aspectos de seguridad como que la información obtenida no tenga datos sensibles o información adicional que no se este requiriendo.

En la red, también existe una posibilidad muy útil y es trabajar sin cache, lo anterior implica que todas las peticiones van a ir directamente al servidor en lugar de buscar las respuestas de estas peticiones en la memoria cache del navegador, para dar un poco más de detalle de esto, sucede que cuando se realiza una petición el navegador guarda la petición y su respuesta en una memoria llamada cache, de esta forma la próxima petición la podrá resolver directamente de esta memoria sin necesidad de ir al servidor, lo anterior ayuda muchísimo con los tiempos de respuesta de las páginas web, pero puede ser un poco molesto si en realidad se necesita que los datos vengan del servidor, habitualmente las páginas web cambian un poco las peticiones o agregan parámetros para obligar al navegador a realizar la petición contra el servidor y no contra la caché.

4.4. Sources

La pestaña de sources nos va a servir para visualizar nuestros archivos js, y poner puntos de interrupción, visualizar valores de variables o ejecutar pasos a paso los scripts, por lo tanto estas opciones también son muy útiles para los programadores cuando depuran en código.

4.5. Otras pestañas y generalidades de devtools

En devtools existen más pestañas por ejemplo para revisar detalles de rendimiento de nuestra página, de la memoria, de seguridad, de la informaición que nuestra página almacena en bases de datos locales o localstorage y muchas otras funcionalidades que resultan útiles para el programador.

Una observación final es que Chrome ya viene por defecto con estas herramientas la única que debemos instalar es la que se anoto al principio del artículo que es un complemento de devtools para VUE.

5. Artículos de Interés

En este artículo aprenderás como escribir archivos en VUE JS, cual es su estructura y adicionalmente sabrás como manejar componentes reutilizables que permitan construir aplicaciones escalables profesionales.

Si deseas aprender a programar en Java sigue este link.

1. Escribir Archivos VUE JS

Lo primero que debes saber para escribir un archivo VUE es que este puede corresponder a una página completa o a un componente dentro de la página y que todo archivo VUE tiene tres secciones: HTML, script y estilos. El siguiente fragmento de código muestra la estructura de un archivo VUE, lo cual sirve de guía para Escribir estos Archivos VUE JS y como se verá más adelante también aplica a componentes.

<!-- #################################################################################### -->
<!-- ###### CURSO VUE                                                              ###### -->
<!-- ###### @author: ochoscar                                                      ###### -->
<!-- ###### @date:                                                                 ###### -->
<!-- #################################################################################### -->

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
  <div id="nav" class="principal">
    <span>App</span>
  </div>
</template>

<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
export default {

}
</script>

<!-- #################################################################################### -->
<!-- ###### Sección de Estilos                                                     ###### -->
<!-- #################################################################################### -->
<style>

</style>

Estas tres secciones corresponden respectivamente a los componentes de la página web que serán mostrados en el navegador, a la sección de lógica escrita en javascript o typescript y la sección de estilos que permiten dar formatos, colores y ubicaciones a los componentes.

TIP: es importante anotar que en la sección de html debe haber una etiqueta template y dentro de esta estarán todos los componentes necesarios de la página web.

Como se aprenderá en estas secciones es muy fácil escribir lógica en VUE JS.

2. La página inicial App.vue y el index.html

Esta es la página inicial creada por VUE, pero es importante comprender que en la carpeta public existe un archivo index donde se inserta la instancia VUE, es decir, toda nuestra aplicación. Si se desea agregar contenido por fuera de VUE se puede hacer sin problema editando este archivo index.html.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3. Creando y usando Componentes

Ahora estamos listos para crear un componente y usarlo, para ello crearemos un archivo nuevo en la carpeta components, observe que existe otra carpeta llamada views y aunque técnicamente no hay diferencia VUE las organiza así para destinar la primera a componentes reutilizables y la segunda a componentes completos de la navegación.

El componente que utilizaremos lo denominaremos entrada, asemejando una entrada o un post de cualquier red social. Este componente es muy sencillo, solamente tiene un div y un span con un texto, también se ha definido una clase de CSS que se utiliza para darle formato al div.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span>Entrada</span>
    </div>
  </template>
  
  <!-- #################################################################################### -->
  <!-- ###### Sección de Script                                                      ###### -->
  <!-- #################################################################################### -->
  <script>
  export default {
  
  }
  </script>
  
  <!-- #################################################################################### -->
  <!-- ###### Sección de Estilos                                                     ###### -->
  <!-- #################################################################################### -->
  <style>
    .principal {
      background-color: #b93434;
      padding: 10px;
      color: white;
      border-radius: 5px;
      width: 100px;
      font-size: 3rem;
      text-align: center;
    }
  </style>

Lo más interesante ocurre cuando se usa este componente en el algún otro archivo de VUE por ejemplo de App.vue.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
  <div id="nav" class="principal">
    <span>App</span>
    <Entrada></Entrada>
  </div>
</template>

<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
import Entrada from '@/components/Entrada.vue'

export default {
  components: { Entrada }
}
</script>

Aquí es importante varios puntos:

• El uso de la @ hace referencia a la raíz de los archivos es decir a la carpeta src.
• En la sección export default (que es la instancia de VUE) tenemos el primer elemento que se usa denominado components y relaciona los diferentes componentes que usamos de otros archivos.
• En esta sección de componentes se define un objeto JSON y el valor es igual al key no hay necesidad de dejarlo explicito por lo cual no es necesario escribir Entrada: Entrada.
• Una vez definido en el script la Entrada se puede usar como etiqueta en el código en HTML.
• VUE combina los estilos de los diferentes componentes, esto obliga a tener cuidado con los nombres de clases, aunque la sección de estilos se puede anotar con el atributo scoped y de esta manera los CSS no se mezclaran.

Nuestra aplicación de VUE luce de la siguiente manera.

4. Artículos de Interés

En esta página encontrarás una guía del paso a paso para lograr un proyecto básico de Hola Mundo en VUE, espero que sea de toda la utilidad y que sirva como punto de inicio para aprender temas más avanzados.

Si quieres aprender Java sigue este link.

1. Crear el proyecto

Crear un proyecto Hola Mundo en VUE es muy simple puesto que existe un wizard que nos guía hacia la construcción del proyecto.

El comando para crear el proyecto es el siguiente:

vue create nombre-proyecto

Para este tutorial el nombre del proyecto será: proyecto-vue

Este comando se puede ejecutar sobre una carpeta vacía para que allí se cree el proyecto, se puede hacer abriendo una terminal o una consola o también sobre una ventana de terminal de visual studio.

El wizard tiene dos opciones, por defecto o manual.

En un segundo paso debes elegir las opciones mínimas, las cuales se recomiendan sean las siguientes, note que no se eligió typescript por lo cual se usará javascript.

El tercer paso implica seleccionar el modo de navegación, para ello lo más conveniente en este punto es seleccionar si, más adelante en el apartado de router.js se entrará en detalles de la navegación.

El cuarto paso, implica seleccionar el nivel de errores de compilación de JS, para efectos de calidad de código se sugiere dejar la opción por defecto.

El quinto paso, implica seleccionar el modo de grabación del analizador de código javascript, se sugiere dejar la opción por defecto.

El sexto paso, consiste en decidir el tipo de empaquetamiento de las preferencias del proyecto, se sugiere dejar en un archivo donde se encuentren todas las opciones, este archivo se llama package.json

El séptimo paso, simplemente consiste en decidir si esta configuración se quiere nombrar para que en un próximo proyecto se utilice de forma rápida, en este caso no se guardará la configuración.

Con esto finaliza la creación del proyecto, el wizard continuará con la descarga y configuración interna del proyecto. En caso que se tenga algún error se deberá verificar los log que arroja el sistema.

Una vez terminado debes seleccionar en el menú de Visual Studio la opción “Add Folder to Workspace” y buscar la carpeta donde se creó el proyecto para poder ver, crear y editar los archivos del proyecto. Con esto ya has generado el proyecto Hola Mundo en VUE.

2. Carpetas y estructura del proyecto

El proyecto Hola Mundo en VUE creado termina teniendo la siguiente estructura:

Aquí se aprecia las siguientes secciones:

• node_modules: corresponde a todas las librerías del proyecto y que se generan automáticamente, si estás usando un repositorio como git, esta carpeta no la debes subir al repositorio.
• public: contiene los archivos que son públicos y que se acceden con rutas del servidor desde el navegador, incluso aquí esta el index.html donde se inserta la instancia de VUE.
• src/assets: son los artefactos como imágenes o archivos multimedia que se utilicen dentro de la aplicación.
• src/components: se almacenan componentes de VUE reutilizables que serán utilizados dentro de vistas completas de VUE.
• src/router: contiene los archivos que indican las condiciones y configuraciones de rutas y navegación.
• src/store: contiene los archivos js con las variables que se usan por la aplicación y donde se pueden consultar operaciones y datos que la aplicación o un módulo de ella utilice.
• src/views: contiene las vistas que normalmente refieren a módulos o páginas completas de la aplicación
• archivos: el resto de archivos son archivos de configuración del proyecto, excepto el App.vue que es el punto de entrada de la aplicación.

3. El main.js

El archivo main.js contiene la creación en js de la creación de la instancia de VUE que se inserta en el archivo index.html, este archivo puede ser modificado para incluir instrucciones particulares que ejecuten en el momento de la carga.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. El router.js

El archivo de router.js contiene la navegación y rutas de navegación, es usual encontrar en este archivo instrucciones que limiten la navegación dependiendo de roles o perfiles. El archivo básico solo contiene instrucciones generales de navegación.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

5. El store.js

El store.js contiene la información que es almacenada para procesamiento de la aplicación y consiste de varios elementos que se explorarán más adelante entre ellos los conocidos como state, mutations, actions y modules.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

6. Estructura de un archivo VUE

Finalmente un archivo de VUE se divide en 3 partes muy importantes y es aquí donde la mayoría de la programación ocurre. Las tres partes es HTML marcado con la etiqueta template y que corresponde a componentes de la vista en el navegador, la siguiente sección es la de script donde se encuentra toda la lógica de la página y finalmente la parte de estilos marcadas con la etiqueta style donde se encuentra las instrucciones para pintar la página.

Estas tres secciones son las que se ha venido hablando correspondiente a HTML, JS y CSS

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

7. Corriendo la aplicación

Ahora para poner a correr el servidor en el archivo README.md se tienen los diferentes comandos, incluyendo algunos muy útiles como para instalar el proyecto cuando se realiza la clonación del proyecto desde un repositorio. Para correr se debe utilizar el comando:

npm run serve

Una vez se ejecuta este comando desde la carpeta donde se creo el proyecto se abre la página web localhost:8080 donde corre por defecto VUE. A continuación se muestra esta aplicación hola mundo!

8. Artículos de Interés