Entendiendo Vue(componentes)

La estructura de un componente se compone en esencia de tres partes

Template

Es la plantilla del componente que posee formato html y donde inyectaremos las variables por una de las  vías que Vue nos ofrece.

Clase

La clase es la zona javascript del componente, en ella creamos la variables y las propiedades que insertaremos en la zona html del componente

Estilos

Son los estilos css del componente, necesarios o no en dependencia de la estructura que demos al proyecto, ya que estos estilos también podrían ser asumidos por un archivo css externo.

El  funcionamiento de un componente no es demasiado complejo, y relativamente fácil de comprender.

Tomemos el  ejemplo que nos ofrece Vue por defecto: el componente HelloWorld.vue  allí veremos definidas las tres partes con sus etiquetas de apertura   y cierre, para template, script y style.

Si eliminemos ahora todo lo que está dentro de template,  y solo dejemos la clase hello, para luego revisar en el navegador, veremos que ahora no hay nada ahí.

Vayamos a la clase encerrada dentro de script, ahí veremos que nombre de esa clase coincide con el nombre el componente, y que posee una propiedad, llamada msg, del tipo string, la misma que aparece en  el template, entonces modifiquemosla, añadiendo una  funcion data que nos devuelve una variable llamada bienvenida,  con un texto adentro;

<script>
export default { 
name: 'HelloWorld',
   props: {
      msg: String
   },
  data()
     {
       return     {
         bienvenida:"Estoy aqui"
       }
     }
 }
 </script> 

Luego vamos a incluir esa nueva variable, dentro del template, siguiendo la estructura de las dos llaves que vimos antes.

<h3>{{ bienvenida }}</h3>

Revisemos ahora el navegador y veremos  que nuestra nueva variable aparece allí con su mensaje.

Un elemento a tener en cuenta es, que un componente, se asigna siguiendo la estructura de nodos del  DOM, y  solo puede imprimirse  en un nodo, por tanto no podríamos imprimir dos msg aunque los declaráramos en el script, a no ser que lo incluyéramos dentro de un div, o lo que es lo mismo no podemos escribirlo en  dos etiquetas html

Construyendo un componente

Un componente es un archivo con extensión vue

Lo crearemos dentro de la carpeta components, lo llamaremos ComponenteNuevo.vue, y le daremos luego esta estructura:

<template>
        <div id=”comp-nuevo”>
             <h1> Nuevo componente de calculo </h1>
             <h3> {{ subtitulo }} </h3>
       </div>
  </template>

 <script>
 export default{
       name: "ComponenteNuevo",
       data(){
             return{
                   subtitulo: "Extraer duplicados"
             }
       }
 }
 </script> 

Como puede verse, no definimos los estilos, solo el template y el código js:

Creamos un div con dos etiquetas dentro, donde el segundo de ellos contendrá el valor de la variable subtitulo creada dentro del script.

Dentro de la etiqueta script, además le asignamos  el nombre, que en nuestro caso será el mismo que el componente.

Y ya hecho esto, nos quedará solo inscribir el componente recién creado dentro del archivo App.vue, dándole la url con la ruta.

Y luego insertándolo dentro del listado de componentes con que trabajamos.

Nuestro código queda así:

<script>
 import HelloWorld from './components/HelloWorld.vue'
 import ComponenteNuevo from './components/ComponenteNuevo.vue'
  
 export default {
   name: 'App',
   components: {
     HelloWorld
     ComponenteNuevo
   }
 }
 </script>

Hecho esto, para que se vea en la página, solo falta añadirlo dentro del div app en la zona del template :

<template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
     <ComponenteNuevo> </ComponenteNuevo>
   </div>
 </template> 

</template>

Ahora ya el componente, que en este caso es solo texto será visible.

La condición para reutilizar este componente en otro lugar o dentro de otro componente, es traerlo mediante el import.

Supongamos que quisiéramos mosrarlo dentro del componente que trae Vue, por defecto: HelloWorld, podemos hacer esto:

 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
     <h3>{{ bienvenida }}</h3>
 //insertamos el componente con un estilo css
     <div style="background-color:#000;color:#fff">
 <ComponenteNuevo></ComponenteNuevo>
 </div>
   </div>
 </template>
  
 <script>
 //Importamos el componente para que pueda ser usado 
 import ComponenteNuevo from './ComponenteNuevo.vue'
 export default {
   name: 'HelloWorld',
 //utilizamos la misma propiedad components que usa app.vue
     components: {
        ComponenteNuevo
   },
   props: {
      msg: String
   },
  data()
     {
       return     {
         bienvenida:"Estoy aqui"
       }
     }
 }
 </script> 

Finalmente entonces, sabemos que:

  • Un componente consta de tres partes: template(html), script(js) y estilos(css)
  • Que un componente es un trozo de código con funcionalidades, y  que se alojará,  en el DOM o la pantalla, en un nodo.
  • Que tiene un nombre, terminado con la extensión vue, y que este nombre será utilizado tanto para importarlo como para declararlo dentro del archivo central app.vue, y en aquel que se vaya  a utilizar.
  • Que es reutilizable, y eso quiere decir que donde queramos usarlo debemos importarlo.

Espero que este pequeño articulo, le sirva de ayuda a alguien.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…. hay que levantarse cada mañana con una esperanza y dormirse cada noche con una meta….

Entendiendo Vue (ficheros)

Vue es un framework para crear código javascript, y está basado en el uso de componentes.

Podríamos decir para que se entienda mejor,  que los componentes son pequeños trozos de código javascript con funcionalidades  y estilos propios,  que insertamos dentro de la pagina html de nuestra aplicación, pudiendo ser reusables y facilmente manejables..

Dentro de nuestra app veremos que existen diferentes archivos. De ellos los que más nos interesan, para comenzar a programar nuestra app en Vue, son :

Public:

Dentro de esta carpeta se guarda nuestra pagina html(index) y el favicon de la aplicación.

Vue crea una SPA, o sea una single page application, una sola pagina sobre la cual se inserta todo el código que vamos a mostrar en nuestra web.

Si nos fijamos dentro del index  encontraremos un div con el id app, es ahí donde Vue, cargará todo nuestro código.

Tambien en index configuraremos las etiquetas meta, favicon, el titulo, mensajes si js no esta activado y  en definitiva, todo lo referente a la base html.

src:

En esta carpeta se concentra la mayor parte de nuestro desarrollo, aquí es donde crearemos la magia.

Dentro de src existen dos carpetas y dos archivos:

assets: es donde se guardan útiles necesarios, el css, las imágenes, etc

components: es donde guardaremos los componentes que creemos

El archivo App.vue:

Es el componente principal, sobre el que se cargaran el resto de los componentes. Los archivos vue, deben terminar siempre con la extensión vue.

Dentro de él, se importaran el resto de los componentes en import … from…. y se cargarán luego dentro de components{}.

El archivo main.js:

Es un documento de configuración, principalmente dentro de el se importa Vue, se determina en que estado esta la app, ya sea produccion y desarrollo y se  crea un nuevo objeto, además se determina la etiqueta donde ese nuevo objeto se cargará que por defecto tiene el id App, y que ya mencione cuando vimos el archivo index.html-

package.json:

Este archivo contiene un array de arrays, con la configuración inicial de la app, es el lugar para ajustar el nombre de la app, algunos script, comandos, configurar las diferentes dependencias con que trabajará  durante toda su vida el proyecto, y las devDependencies que son aquellas dependencias que solo estarán disponibles para trabajar  en local.

node_modules:

como su nombre lo indica contiene todos los módulos de nodejs, instalados en la app.

Y estos son los más importantes y que debemos conocer para comenzar a desarrollar en Vue.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana hombres……

Entendiendo Vue(instalación)

Para instalar Vue, basta con ir a la raíz z de la carpeta donde crearemos el proyecto, en xamp podria ser htdocs o alguna carpeta dentro de htdocs, donde construiremos uno o varios proyecto.

En este ejemplo usamos la bandera -g para hacer una instalación global.

npm install –g global @vue /cli

Es muy importante recordar que Vue corre sobre Nodejs, por tanto, para que la instalación funcione, es necesario tener instalado node.js antes

Una vez instalado comprobamos la la version instalada con:

vue –version

Crear un nuevo proyecto

vue create nombre_del_proyecto

El instalador preguntará, si deseas instalar  algún linting (herramienta para detectar  dentro del código errores de sintaxis o programáticos), si no tenemos preferencias , clicamos enter para continuar.

Una vez se cree el proyecto, nos recomendará para comenzar, correr estos comandos:

$ cd nuevoproyecto
 $ npm run serve 

Los corremos y estaremos ya dentro del proyecto, luego de correr el servidor de npm, obtendremos la información del la dirección donde corre nuestro app en vue:

App running at:
Local:       http//localhost:8080/
Network: http//192.168.0.102:8080/

Note  that the development build  is not optimized. 
To create a production build, run npm run build.  

Si entramos ahora al navegador y escribimos http:localhost:8080, obtendremos la web donde corre nuestra app.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…., si avanzo sígueme, si me detengo empújame, si retrocedo mátame…….