Componentes fundamentales para nuestra App

Components

Permiten extender elementos html para encapsular código reutilizable, estos son personalizables para que el compilador de Vue añada un comportamiento que nosotros definimos.

Estos contienen como estructura código html, scripts javaScripts y estilos; todo esto en un solo componente.

Router

Para que los componentes puedan ser cargados, necesitamos definir las rutas. En las rutas importamos los componentes que necesitamos rutear y en el código le pasamos un path o dirección, le damos un nombre y el componente que queremos que se llame al ser cargada la ruta.

Routes:[

{

Path: ‘/nuestra-ruta’

Name: ‘el nombre de cómo lo queremos llamar’

Component: ElComponente // el componente que queremos que se llame al pasar la ruta.

}

]

App.vue

Tenemos la misma estructura de los componentes, template, scripts, style. Esto es de forma macro para todo nuestro proyecto, acá definimos en nombre de nuestra app y en la parte del template finalmente se cargan los otros templates de los componentes que hemos codificado.

main.js

Este archivo maneja el comportamiento principal de nuestra app en donde tenemos que importar los recursos necesarios para nuestra app y además de ello generamos la instancia de Vue en y declaramos el dominio con “el: app”.