Crea tu app con el Vue CLI

2/27

Lectura

D3PF: aplicación Vue.js creada desde cero que consume las API oficiales de Diablo III, el famoso juego de Blizzard. Ofrece un buscador de jugadores reales del juego para mostrar sus estadísticas y personajes.


main.png

Vue CLI

📗 https://cli.vuejs.org/

Vue CLI (es decir, la interfaz de línea de comandos) es una herramienta para crear proyectos de Vue.js de forma rápida, desarrollada por el equipo de Vue.js.

Para usar esta herramienta deberás tenerla instalada (recomendado de manera global). Si ya la tienes instalada, puedes saltarte este paso.

Y recuerda, para seguir este curso es obligatorio que tengas Vue CLI instalado.

Instalar Vue CLI

Desde tu terminal escribe el siguiente comando:

npm install -g @vue/cli
# O
yarn global add @vue/cli

Una vez instalada la herramienta, podemos empezar a crear nuestro proyecto. Existen dos formas de crear un proyecto con el CLI de Vue:

  • A través de la terminal: vue create nombre_proyecto (esta es la que vamos a usar nosotros).
  • A través de una interfaz gráfica: vue ui (a través del navegador, vas seleccionando con el ratón las opciones que te interesan).

Crear el proyecto con Vue CLI

Desde la terminal escribe el siguiente comando:

vue create diablo3

Elige la forma manual y después te debería aparecer lo siguiente:

create-1.png

El CLI de Vue está preguntando qué features quieres instalar en el proyecto. Vamos a instalar todas las que están marcadas en verde (para marcar una opción usa la tecla space y para moverte usa las flechas de ⬆️ / ⬇️).

  • Babel.
  • VueRouter para el manejo de rutas.
  • Vuex para la gestión del estado.
  • Pre-procesador CSS.
  • Linter estricto. Si no has usado uno antes, seguro que te cuesta adaptarte. Pero verás que merece la pena.
    Ahora todo tu código, incluso si trabajas con varias personas en el proyecto, va a tener el mismo estilo, pues de esto se va a encargar el linter. ¡Le va a dar un toque muy profesional a tu aplicación! 😉
  • Testing: unitario y end to end (E2E).

Cuando tengas todo marcado, presiona la tecla enter y al terminar empezará a hacer preguntas que irás respondiendo una a una hasta llegar al final.

Estas son las opciones que debes elegir:

create-2.png
  • History mode: elige no. Esto sirve para dejar o quitar el hash (#) de la url. En nuestro caso lo hemos dejado.
  • El pre-procesador de CSS que vamos a elegir es Stylus, me gusta porque es potente, simple y elegante.
  • Linter, vamos a tener dos opciones:
    • La primera: Standard Config. Es la configuracion de linteado que mas me gusta. Está basada en Standard Js.
    • La segunda: marcamos las dos opciones Lint on save y Lint and fix on commit. Con esta configuración no vamos a poder hacer commit si tenemos algún error de linteado.
  • Como herramienta de testing unitario utilizaremos Jest.
  • Para testing E2E usaremos Cypress.
  • En esta opción elegimos In package.json. Esto guardará las configuraciones de algunas librerías dentro de ese fichero.
  • Y por último, pregunta si queremos guardar estas opciones para poder usarlas por defecto en el futuro. Puedes elegir la que quieras, en esta ocasión vamos a marcar no.

Ahora empezará a instalarse todo lo que hemos ido marcando. Cuando termine, si todo ha ido bien, deberías ver la siguiente pantalla:

create-3.png

Si no tienes instalado yarn, puedes usar npm, es (casi) lo mismo.

Por lo tanto, para arrancar la aplicación desde la terminal hacemos lo siguiente:

  • Vamos a la carpeta del proyecto: cd diablo3/.
  • Ejecutamos el servidor en modo desarrollo. Bien con npm run serve o con yarn serve.

Cuando el servidor esté levantando verás algo como esto:

create-4.png

Ahí nos indica que nuestra aplicación Vue está levantada en la url http://localhost:8080 con el siguiente contenido:

create-5.png

💡 Para evitar que nos salga un error en la terminal, como el de aquí abajo, vamos a modificar el fichero package.json, en concreto el bloque de devDependencies.
Esto se debe a un error no corregido por parte de la librería babel-eslint.

error-babel.png
    "@vue/cli-service": "^4.2.0",
    "@vue/eslint-config-standard": "^5.1.0",
    "@vue/test-utils": "1.0.0-beta.31",
-   "babel-eslint": "^10.0.3",
+   "babel-eslint": "7.2.3",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",

Actualiza la versión que tengas de babel-eslint a la 7.2.3. En mi caso, he pasado de la versión ^10.0.3 a la 7.2.3.
Hazlo ahora, para que luego en el futuro no te de problemas.


¡Enhorabuena! Ya has creado tu app con el CLI de Vue.
En la siguiente sección repasaremos la documentación de las API de Blizzard para saber cómo usarlas y empezar a construir nuestra aplicación.

Aportes 25

Preguntas 4

Ordenar por:

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

Vengo del futuro! He completado el curso y el examen y vengo a compartir algo que les va a ser útil, MUY ÚLTIL, para el curso y es:

npm run lint

Es posible que al copiar y pegar código de Platzi a tu proyecto surjan errores de linteo y Vue se ponga pesado con estos errores, este comando sirve para arreglar los errores de linteo automáticamente, y en caso de que no pueda arreglarlos automáticamente te dirá que cuál es el error y dónde está, recomiendo correrlo siempre que vayas a mirar tu aplicación en el navegador, así te evitas encontrarte con la pantalla de error.

Seria bueno agregar que después de realizar el cambio en las versiones del paquete que menciona e la última parte es necesario ejecutar nuevamente:

npm install

Esto revisa tu archivo package.json para instalar las versiones especificadas para cada paquete

Voy a intentar realizar este curso con lo mas nuevo de Vue. Vue 3 + Pinia (en lugar de vuex) + Quasar (en lugar de bootstrap) + Vite(en lugar de webpack). Deseenme suerte jaja… Here we go!!

Dejo mi repo:
https://github.com/DanielParra05/app-diablo3

Instalen las versión 2 de Vue, no la 3 o van a tener muchos problemas porque los plugins todavía no son compatibles a la fecha que comento esto

Acabo de crear el proyecto y en el package.json tengo babel-eslint==^10.1.0, no me arrojó ningún error, quiero pensar que ya lo corrigieron 😃

Estando en windows me pasaba que cuando estaba creando el proyecto no funcionaba el comando vue create lo pude resolver con lo de abajo, ejecutando con permisos. Saludos!

vue.cmd create diablo-dashboard

Ya emocionado…

A qué se debe el Error de babel-eslint ?

Mmm, los textos siguen teniendo muchos errores de compilación del Markdown

Por que no usar el History Mode? 🤔

Buenas tardes,
para quienes tengan un problema (como en mi caso), con el comando vue create nombreProyecto, pues les comento:

npx @vue/cli create appname

El problema: al escribir por ejemplo el comando: vue create diablo3 + [TECLA ENTER] sencillamente no sucede nada, no muestra errores y acto seguido vuelve a cargarse el prompt de la terminal, algo como esto:

Captura de pantalla de mi terminal al escribir el comando que falla

Me emociona el proyecto, veo que vamos a hacer uso de testing así que está super! Aunque eso de la opción de guardar todo en el package.json no me parece muy práctico, creo que por buenas prácticas es mejor dejar todo en archivos de configuración separado. Y lo del history mode… no entiendo por qué querríamos tener ese # en nuestras URL’s

En modo texto es epico

wii

😊

Hola. Con que version de cli trabajan en este curso?.
Yo puedo hacer el proyecto con cli 3 o tendria que hacerlo con la version que se trabaja en este curso para no tener inconvenientes?.
Me podrian decir que version es y como instalarla?.
Gracias.

Haciendo lo de Babel Eslint me surgió la duda, ¿Aún es necesario hacerlo? Actualmente está la versión 10.1.0 igual y el error que sea ya se corrigió, ¿Qué pasa si dejo esa versión y en caso de que me de el error hago el downgrade?

Genial! vamos a usar preprocesadores!!! en el básico usamos CSS normal, dejo un vídeo que había buscado para usar Sass en Vue: https://www.youtube.com/watch?v=OgdtkVypr-0

Luego sería interesante usar TypeScript!

Vale no entendi y si se debe definir las configuracion o solo con seleccionarlas bastaba, del resto todo bien, vamos por mas 😍

Pueden probar la App con personaje numero uno del actual Ranked
BattleTag: Horasohn#2399
Region: EU

Excelente proyecto! 😃

Es idea mia o los textos tienen un bug

¿Afecta mucho el curso si trabajo con sass en lugar de Stylus?

Hola tengo este error en la consola VSC:

ERROR Failed to compile with 1 errors 2:01:23
This relative module was not found:

  • …/assets/logo.png in ./node_modules/cache-loader/dist/cjs.js?{“cacheDirectory”:“node_modules/.cache/vue-loader”,“cacheIdentifier”:“4701ba98-vue-loader-template”}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home/Index.vue?vue&type=template&id=d5e59f88&

y esto me sale en el navegador:

Failed to compile.

./src/main.js
Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\casil\Desktop\proyectosVue\diablo3\src\main.js
23:18 error Newline required at end of file but not found eol-last

✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the --fix option.

Tuve un problema para la instalaciòn de @vue/cli en la consola de linux por tema de permisos para solucionarlo use sudo .

sudo yarn global add @vue/cli