Si has creado el proyecto usando el asistente de Vue CLI 🚧 seguramente tengas una estructura similar a la que se explica a continuación.
En caso de que hayas creado el proyecto de forma manual te recomiendo de todas formas que mires cómo se estructura un proyecto por si quires replicarla o por si tienes que tocar un proyecto ya creado de Vue.
📁 Carpeta node_modules
El node_modules es una carpeta que tienen en común todos los proyectos que tiren de depencias instaladas con NPM.
Si es tu primera vez tengo que decirte que en esta carpeta se ecuentran todos los ficheros necesarios para que Vue pueda funcionar por lo que nunca tienes que tocar los ficheros de su interior.
Revisa que esta carpeta esté dentro del fichero de .gitignore para que no se suba al repositorio de códifo (Github o similares). Si no tienes esta carpeta ejecuta en la terminal npm install dentro del proyecto para regenerarla.
📁 Carpeta public
En esta carpeta hay dos archivos:
favicon.ico: Es el icono que aparece al lado del nombre de la pestaña en el navegador, por defecto es el logo de Vue pero lo puedes cambiar por tu icono en formato .ico
public.html: Es el archivo html sobre el que se montará toda la página. Como hemos dicho en capítulos anteriores, al ser una aplicación SPA, todas las vistas se cargan dinámicamente sin tener que recargar la paǵina. Esto significa que toda la página se incrustará dentro de la etiqueta:
<div id="app"></div>Por lo que toda la página compartirá este HTML. Por cierto, si quieres insertar nuevos archivos de estilos o archivos javascript en el head de esta página NO tienes que llamar a tus archivos aquí, esto lo haremos con webpack.
Lo mejor es no tocar este fichero.
📁 Carpeta src
En la carpeta src se sitúan ya los componentes de Vue. Además de los componentes, en esta carpeta se suelen crear todo el resto de ficheros necesarios para que la web funcionen: vistas, assets, otros ficheros .js con lógica, etc.
assets: En esta carpeta se encuentran todos los archivos estáticos de tu aplicación. Cuando creas la estructura se añade el archivo logo.png de ejemplo.
Cuando quieras meter una imagen, fuentes, o cosas así lo puedes hacer en esta carpeta. Vue y webpack se encargarán de servir los archivos de esta carpeta para que los puedas llamar desde las vistas.
components: Aquí se crearan todos los componentes web. Al crear el proyecto ya te viene creado el componente HelloWorld.vue de ejemplo. Lo más recomendable es que dentro de esta carpeta crees carpetas para separar los componentes entre sí. Lo que se suele hacer es separar los componentes por páginas o por área a la que pertenece.
views: Si al crear el proyecto has seleccionado manualmente que se instale El router de Vue para crear las vistas, aparecerá esta carpeta (si no lo has hecho cuando veamos las vistas te enseñaré como instalarlo en un proyecto ya creado). En esta carpeta se sitúan los componentes encargados de cada una de las vistas y rutas de la página. Lo normal es que haya un componente por cada ruta de la página.
📄 Otros archivos
Aparte de las carpetas que acabamos de ver, Vue crea estos archivos. En mi caso al crear el proyecto de Vue seleccioné que las configuraciones vayan en archivos separados para una mejor gestión.
- .browserslistrc: En este archivo se especifican cuántas versiones hacia atrás se quiere tener compatibilidad con los nevegadores.
- .eslintrc.js: Aquí se establecen las normas y las configuraciones del eslint, es decir, de la herramienta que te dice los errores y los warnings cuando guardas los archivos. Si hay una regla que no la quieres, aquí la puedes personalizar o quitar directamente.
- .gitignore: Aquí le dices al git qué ficheros quiere que ignore. Por defecto Vue te habrá colocado los recomendados.
- babel.config.js: Configuraciones de babel, la herramienta que transpila el javascript generado a código entendible por navegadores antiguos.
- package.json y package-lock.json: Donde se establecen las versiones de la librerías requeridas. Además se pueden establecer otros parámetros como el nombre de la aplicación, versión, autores, etc.
- postcss.config.js: Aquí van las configuraciones del transpilador de CSS, en mi caso uso sass.
- README.md: Archivo que se muestra al entrar en un proyecto en el github o gitlab. Aquí puedes escribir información sobre el proyecto que creas conveniente.
Conclusiones
Recuerda que la estructura de carpetas de Vue no es obligada, eso quiere decir que siempre vas a poder configurar las carpetas como más te gusten.
Ahora que ya sabes a grandes rasgos que es cada carpeta y cada fichero te recomiendo que empieces a crear tus primeros Componentes de Vue.