Bienvenida al curso
"Curso de Desarrollo Frontend con APIs de Videojuegos"
VueCli, configuración inicial del proyecto y consumo del API de Blizzard
Creación de Aplicaciones Vue.js con API de Diablo III
Desarrollo de Aplicaciones con APIs de Blizzard: Guía Completa
Estructura y gestión de carpetas en proyectos Vue.js
Instalación y configuración de librerías en Vue con Bootstrap
Configuración de Axios para llamadas a APIs de Diablo III
Gestión de Tokens con Vuex: Integración y Almacenamiento en Vue.js
Creación de los componentes y layouts de nuestro proyecto
Componente Reutilizable de Carga con Vue.js
Estilos CSS oscuros para aplicaciones Vue.js con Stylus
Creación de Layouts con Vue y Bootstrap para Mejorar la UI
Organización de Assets en Vue: Imágenes, Fuentes y CSS Globales
Creación de NavBar y Footer con BootstrapVue y FontAwesome
Refactorización de Importaciones en Vue.js con Plugins
Buscador de Perfiles en Diablo III: Creación de Formulario y Título
Rutas Dinámicas y Lazy Loading en Vue.js
Construcción y Consumo de APIs con Vue.js y Vuex
Creación y Uso de Componentes en Vue.js: MainBlock y TopHeroes
Visualización de Héroes con Bootstrap-Vue en Diablo III
Componente de Progreso de Actos en Vue.js
Implementación de Componentes Vue: MainBlock y PlayerStats
Navegación y Visualización de Artesanos en Vue.js
Funciones y Componentes para la Vista de Héroe en Vue.js
Agregando funcionalidades avanzadas a nuestro proyecto
Carga Diferida de Componentes en Vue.js: Mejora de Rendimiento
Implementación de Inventario de Objetos de Personaje en Vue.js
Directivas Personalizadas en Vue: Creación y Uso Básico
Configuración y despliegue de aplicaciones en Netlify con Vue.js
Creación y Personalización de Páginas en Vue.js
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:
...
Regístrate o inicia sesión para leer el resto del contenido.
Aportes 12
Preguntas 3
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”
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"
},
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?