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:
importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../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 =newVueRouter({ routes
})exportdefault 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í.
Les va a salir otro error. Uno relacionado con el logo de Vue.
Para corregirlo deben ir a
views/Home/Index.vue
Linea 3
esto
<img alt="Vue logo" src="../assets/logo.png">
lo remplazan por
<img alt="Vue logo" src="../../assets/logo.png">
Y listo, a seguir!
Justo iba a compartir dicha solución asociada al Logo, basta con leer el error para quienes quieren tener un acercamiento más directo con la lectura/solución de errores, para saber que la path anterior antes de las modificaciones intervinieron en el proceso de compilación.
Es tal y cómo dices, y aunque ya explique el motivo, es bastante fácil de solucionar. Solo con leer el error ya sabes cómo solucionarlo 👌
A continuar!
Sino eliminaron el contenido del template por defecto al instalar todo, les generará un error también el logo de Vue, Lo pueden eliminar o le modifican la ruta para arreglarlo y dejar todo funcional
<img alt="Vue logo" src="../../assets/logo.png">
basta con poner
@/assets/logo.png
se le conoce como rutas relativas
No se si al momento de la creación del curso aún era necesario, pero actualmente ya no es necesario especificar la extensión .vue al importar los componentes.
Aún así se me hace un poco raro el hecho de trabajar una carpeta para cada componente, al menos en el editor de código podría volverse un lío el tener abierto dos componentes que se llamen Index.vue
Si es un poco raro lo de tener una carpeta por cada componente lo bueno es que si en el editor presionas
ctrl + p
y escribes el nombre de la carpeta te muestra el archivo
Les va a salir otro error y es porque no encuentra el logo de VUE ya que su dirección tambien a cambiado. este está dentro de la vista Home.
un tip para no complicarnos con las rutas es definiendolas con @ p.e "@/views/Home/Index.vue"
Puede ser, en mi editor cuando hago un cambio de carpeta de un fichero a otro, me actualiza el path de los elementos afectados.
¿Qué tal es Vuetify? ¿Por qué elegir Boostrap-Vue en vez de Vuetify? ¿Cuales seria las ventajas de Boostrap-VUE sobre Vuetify y viceversa?
Vuetify es bueno, me gusta. Durante un tiempo lo estuve usando. Pero me resulta mucho más complejo de entender y de usar.
Ah ok, entonces una ventaja de Bootstrap-Vue, sería la facilidad de entender e implementar. Muchas gracias.
¿Qué diferencia es tener la carpeta con el nombre del componente y crear dentro el Index.vue? ¿Por qué no se maneja un folder que tenga los componentes normal?
Son varias formas de organización, al profesor le gusta organizarlo así, esto porque cada componente puede contener subcomponentes, y él prefiere agrupar esos subcomponentes en la carpeta del componente :D
ah ok, entonces estaría bien si creo, por ejemplo, una carpeta que tenga componentes en común o que se van a reutilizar en más componentes y otro donde se tengan los componentes basado en las secciones que se tenga dentro de la aplicación. ¿Verdad?
axios nodejs
😌
Agregué un nuevo comando : "dev" en los scripts que me permite por el momento correr el linting y levantar mi entorno.
"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","test:unit":"vue-cli-service test:unit","test:e2e":"vue-cli-service test:e2e","lint":"vue-cli-service lint","dev":"npm run lint & npm run serve"},
Genialll!
super!!!
gracias!
Si lo hacen con PhpStorm lo refactoriza solo :D
En webstorm también debería funcionar entonces ;P
IntelliJ Idea
ya no es necesario especificar la extensión .vue
Tengo dos preguntas
¿Pasa algo si uso minúsculas en el nombre de ++index.vue++?
En la importación de los componentes en lugar de escribir la ruta completa simplemente estoy escribiendo el nombre de la carpeta y ya, por defecto resuelve en el ++index.vue++, ¿si está bien así? Es una costumbre que traigo de otros frameworks.
Está muy bien así.
En verdad, es mejor práctica, pero mi costumbre me llevó a hacerlo con mayúscula.
Alguno sabe a qué puede deberse el siguiente error:
Compañeros ayuda!!! tengo este problema y por más que he luchado no encuentro el problema:
Hice el cambio el views y el router y salió el error, probé dejar los archivos como estaban y al cambiar algo me volvió a salir, realicé un npm run lint o npm install por si eran problemas con alguna dependencia y sigue sin funcionar. Ayuda!!!!!! Cambiando o dejando igual lo que vimos la clase pasada de la versión de babel tampoco se soluciona.
Eso son validaciones de las reglas que tiene ESLINT para validar que el codigo este escrito de forma estandarizada, la pregunta es tu modificaste algo en ese componente, porque te esta sacando reglas de comillas, de comas. Podrias compartir un pantallazo del componente Home.
Home:
<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"/><HelloWorld msg="Welcome"/></div></template><script>// @ is an alias to /srcimportHelloWorldfrom"@/components/HelloWorld.vue";exportdefault{name:"Home",components:{HelloWorld,},};</script>
About (Por si acaso):
<template><div class="about"><h1>This is an about page</h1></div></template>
Y router:
importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../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 =newVueRouter({ routes
})exportdefault router
La verdad es que no moví comillas o así solo lo de los nombres o rutas, Será alguna extensión del VSC? Por ejemplo la textensión de ESLint o Prettier?
