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……