...

Estructura de un proyecto Vue

La estructura que sigue un proyecto Vue es la siguiente:

node_modules/        Dependencias descargadas con npm
public/              Incluye el favicon y un html por si no se puede cargar la aplicación
src/
|-- components/      Componentes
|-- locales/         Internacionalización (i18n)
|-- router/          Navegación (vue router)
|-- services/        Llamadas a servicios REST
|-- store/           Estado global (vuex)
|-- views/           Vistas (componentes globales para las diferentes vistas)
|-- App.vue          Componente padre toda de la aplicación
\-- main.js          Inicialización de la aplicación
package.json         Información del proyecto y dependencias
vue.config.js        Configuración adicional de Vue

Como se indica en las descripciones, la aplicación se inicia en main.js, donde se crea la instancia de Vue. El componente inicial, el que será el padre de todos los componentes, será App.vue. En éste, generalmente tendremos las partes fijas de la aplicación, como el header, footer, o menú. Para el contenido de la página, con <router-view> se le indica que se cargue el componente (que será una vista, es decir, un componente del directorio Views) correspondiente a la ruta en la que nos encontremos. Las diferentes rutas tendremos que definirlas en src/router/index.js.