Estructura y gestión de carpetas en proyectos Vue.js

Estos son los comandos de la aplicación que tenemos disponibles desde la terminal, cuando estamos en la carpeta del proyecto. Puedes verlos en el bloque de scripts del fichero package.json.
De momento solo estamos usando el de ejecutar el entorno de desarrollo, más adelante explicaremos el resto:

Instala las dependencias del proyecto
npm install

Ejecuta el entorno de desarrollo
npm run serve

Compila y construye para producción
npm run build

Ejecuta los test unitarios
npm run test:unit

Ejecuta los test end-2-end
npm run test:e2e

Linting y corrección de archivos
npm run lint

Estructura de carpetas

En esta lectura vas a entender cuáles son las carpetas que vamos a utilizar durante el curso.

Después de crear el proyecto con vue create, deberías tener una estructura de carpetas como esta:

Lo primero que vamos a hacer es crear todas las carpetas que va a utilizar la aplicación. Para posteriormente explicarlas.

A partir de ahora trabajaremos sobre la carpeta /src

Por lo tanto, dentro la carpeta /src, crearemos las siguientes carpetas: api, directives, filters, layouts, mixins, plugins y utils.

Esta es la estructura de directorios que deberías ver:

Estos son los directorios que vamos a usar durante el desarrollo de esta aplicación. Esto no quiere decir que siempre tengas que seguir este modelo. Esto es solo un ejemplo, que es el que suelo usar habitualmente en mis proyectos.
Esta es una de las características que me gustan de Vue, la libertad que ofrece para hacer las cosas a tu manera.

Carpetas

Vamos a explicar que haremos con cada carpeta:

• /api: Archivos con las llamadas HTTP a las APIs. Importaremos axios y lo utilizaremos para obtener los datos del juego.
• /assets: En esta carpeta tendremos archivos CSS globales e imágenes, es decir, contenido estático.
• /componets: Aquí estarán los componentes reusables de nuestra aplicación. Piensa por ejemplo, en un componente loading que podrá ser usado varias veces a lo largo de la app.
• /directives: Las directivas personalizadas que hagas estarán aquí. Ejemplos de directivas en vue son: v-if, v-for, etc. Cuando creemos una directiva personalizada, la alojaremos en esta carpeta.
• /filters: Dentro de esta carpeta estarán los filtros que usaremos para darle formato a los datos de nuestra vista.
• /layouts: Los layouts de nuestra app. Serán la estructura base sobre la que inyectaremos nuestras vistas. Suelen tener el header-bar y el footer común a toda la app.
• /mixins: Los mixins (fragmentos de código reusable por nuestros componentes) los encuentras en esta carpeta.
• /plugins: Esta carpeta puede llevar a confusión porque, realmente, lo que alojaremos aquí no son plugins que creemos para Vue, sino que tendremos librerías de terceros.
  Por ejemplo Bootstrap-Vue, la librería de componentes que usaremos a lo largo del curso.
• /router: Controlaremos las rutas de nuestra aplicación desde aquí.
• /store: El estado de nuestra aplicación. Lo gestionaremos a través de Vuex.
• /utils: Carpeta con funciones generales o que no tienen una temática definida. No es conveniente abusar de esto. Si tienes mucho contenido aquí quiere decir que deberías agrupar funcionalidades en otro directorio.
• /views: Aquí estarán todas las vistas de nuestra aplicación. Hay que recordar que, en Vue, todo son componentes, y, en este caso, dichos componentes hacen de vistas de nuestra aplicación.

Estas son las carpetas que usaremos a lo largo de nuestro proyecto. Ya sabes que Vue nos da flexibilidad, por lo tanto no es obligatorio seguir estas pautas a la hora de crear nuestro proyecto.
Una buena manera de ver otras formas o estructuras es revisar cómo están hechos los proyectos de otras personas, por ejemplo, en GitHub.

> ¿Tienes proyectos de Vue en GitHub? ¿Qué arquitectura utilizas? Muestra tus proyectos en el sistema de comentarios

---

Vistas

Vamos a cambiar la forma de trabajar con las vistas. Actualmente tienes esto:

Dentro de la carpeta /views vamos a cambiar los componentes de Home.vue y About.vue.

Para este proyecto la forma de trabajar con la mayoría de ficheros va a ser la siguiente:

• Primero creamos una carpeta que tendrá el nombre de nuestro componente (en este caso, de nuestra vista). Por lo tanto, creamos la carpeta /Home.
• Lo segundo, es mover el componente Home.vue a la carpeta /Home.
• Por último, tenemos que renombrar el componente vista que acabamos de mover. Le cambiamos el nombre de Home.vue a Index.vue. (Recuerda, todos los nombres de las carpetas dentro de la carpeta de vistas (/views) los vas a crear con la primera letra en mayúscula) Durante este proyecto, todos los componentes que veas que se llamen Index.vue van a ser el componente de entrada principal, del cual dependerán los demás componentes.

Repite estos pasos con el componente About.vue y al final tendrías algo como esto:

Si tienes tu servidor del proyecto levantado, seguramente te hayan aparecido un par de errores en la terminal.

Esto es porque hemos cambiado el path de nuestros componentes vistas, y no hemos cambiado el archivo que controla las rutas. Vamos a cambiarlo.

Rutas

Por defecto, en nuestro fichero de rutas /router/index.js, tenemos estas rutas:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

El error de consola viene porque los componentes vista que teníamos antes han cambiado de lugar. Actualizamos el path de nuestras vistas con el siguiente contenido:

import Vue from 'vue'
import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from '../views/Home/Index.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/About/Index.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

Una vez hayas cambiado esto, no deberías tener ningún error en la consola. Más adelante retomaremos este fichero, pero de momento lo dejamos así.