...
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
de nuestros proyectos Vue vendrá marcada por unos directorios comunes de forma que el código quede organizado de forma similar en todos los proyectos FundeWebJs. El código lo tendremos bajo la carpeta :
- /src/assets: contendrá archivos que necesite nuestro proyecto, imágenes por ejemplo, y también el estilo corporativo mientras no esté disponible como un paquete de npm (guía de estilo corporativo).
- /src/components: componentes Vue propios.
- /src/locales: archivos de internacionalización (documentación de internacionalización).
- /src/mixins: mixins, archivos js para añadir funcionalidad a los componentes. Por ejemplo, aquí tendremos el mixin AuthRefresher para refrescar el token del usuario logeado.
- /src/router: contendrá un index.js con el router donde vendrán definidas las rutas de nuestra aplicación (documentación vue-router).
- /src/services: archivos js correspondientes a las llamadas a nuestros servicios REST (documentación de llamadas a servicios REST).
- /src/store: store de Vuex y sus módulos (documentación Vuex).
- /src/views: componentes que sean vistas, generalmente tendremos uno por ruta.
- /src/App.vue: componente inicial de la aplicación.
- /src/main.js: archivo js donde hacemos imports globales e inicializamos la instancia de Vue.
Además, en la raíz del proyecto, tendremos:
- package.json: archivo que contiene las dependencias de nuestro proyecto.
- vue.config.js: archivo de configuración.
- archivos de parametrización: podemos tener diferentes archivos que contengan variables de entorno (documentación de parametrización).
Hacemos una diferenciación entre lo que serán vistas y lo que serán componentes para mantener cierta organización y que no acabemos con una carpeta poco intuitiva que contenga demasiados archivos. En ambos casos serán componentes, archivos .vue, pero las vistas serán los componentes que contengan una pantalla completa, mientras que los componentes son partes de éstas, por ejemplo una tabla, o cierta sección que queramos mostrar en nuestra pantalla, o una parte reutilizable que se utilice en diferentes vistas.
La 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. Un ejemplo de App.vue podría ser este, que incluye el header del portal de servicios y el elemento <router-view>:
...
| Bloque de código |
|---|
registry = https://verdaccio.um.es/ |
Y ejecutar estel este comando en la terminal de VS Code:
...