Comandos del Proyecto

4/27

Lectura

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:

project-files

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:

project-files

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:

default-views

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:

views-complete

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

views-complete

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í.

Aportes 11

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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!

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">

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

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”

Si lo hacen con PhpStorm lo refactoriza solo 😄

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.

Alguno sabe a qué puede deberse el siguiente error:

Uncaught ReferenceError: exports is not defined
<anonymous> vue-router.esm-bundler.js:2306
<anonymous> vue-router.esm-bundler.js:3375
js chunk-vendors.js:4913
webpack_require app.js:854
fn app.js:151
<anonymous> index.js:4
js app.js:1229
webpack_require app.js:854
fn app.js:151
<anonymous> main.js:12
js app.js:1217
webpack_require app.js:854
fn app.js:151
1 app.js:1290
webpack_require app.js:854
checkDeferredModules app.js:46
<anonymous> app.js:994
<anonymous> app.js:997

¿Existe algún problema si en lugar de mixins llego a utilizar composables con el Composition API para Vue 2?

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.

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"
  },