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 26

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 馃槂

He terminado el curso, y he pasado el proyecto de Vue 2 a Vue 3.

De Webpack a Vite, de Options Api a Compostion Api, y de Vuex a Pinia.

Comparto mis resultados:

Vue 2: https://github.com/carlosmperilla/Diablo3-API-Vue-v2

Vue 3: https://github.com/carlosmperilla/Diablo3-API-Vue-v3-

Si quieren hacer el curso en Vue 2 y pasarlo a Vue 3, sepan que se puede, si quieren hacerlo en Vue 3 con Composition, tambien los invito a probar.

Hay que aprovechar el formato de texto.

隆Mucha suerte!

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?

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

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? 馃

Ya emocionado鈥

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鈥檚

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.

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?{鈥渃acheDirectory鈥:鈥渘ode_modules/.cache/vue-loader鈥,鈥渃acheIdentifier鈥:鈥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