Estructura de aplicación en proyectos Vue.js 2

Author
By Darío Rivera
Posted on 2020-10-10 in Vue.js

En un post anterior vimos Cómo crear un scaffolding de aplicación en Vue.js con el preset [Vue 2] babel, eslint. Si eres nuevo en Vue y tampoco sabes mucho de Node pudiera parecer un poco confuso esta estructura de aplicación. Sin embargo, esta estructura es mucho más clara de lo que parece a simple vista. Vamos a ver en detalle cada componente.

File / Dir Meaning
/node_modules Es la carpeta vendor de nuestro proyecto. Aquí se almacenarán todos los paquetes que necesita nuestro proyecto para funcionar.
/public En esta carpeta estarán los archivos públicos de la aplicación. Aquí también estará el punto de entrada el cuál es el archivo index.html.
/public/index.html Es el archivo de acceso principal de la aplicación.
/src Aquí estará todo el código de la aplicación en Vue.js, es decir, componentes principalmente.
/src/components Contiene todos los componentes creados en Vue.js.
/src/App.vue Es el componente principal de la aplicación. Este componente llamará a todos los demás componentes creados en la carpeta components.
main.js Es el archivo principal o punto de entrada JS de la aplicación. Aquí se importan las librerías que hayamos instalado en la aplicación y se incia la instancia principal de Vue.
package.json Este archivo indica las dependencias de nuestro proyecto, los comandos disponibles y otras configuraciones.
babel.config.js Es la configuración de Babel. Básicamente indica como se va a transpilar el código moderno a código más antiguo que entienda todos los navegadores.
.gitignore Indica que archivos omitir para el sistema de gestión de versiones.

Lo más importante de esta estructura es entender en dónde se deben crear los nuevos componentes de Vue y cómo integrarlos a nuestra aplicación. El objetivo final de este post, es ilustrar de manera sencilla la estrucutra de una aplicación en Vue e incentivar al desarrollador a que revise cada uno de estos archivos y directorios. Hasta la próxima!


Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.