Estructura de aplicación en proyectos Vue.js 2
Por
Darío Rivera
Publicado el
en
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!