VS Code + Vetur / Chrome / Firefox + Dev Tools

Cuando abria la pagina con Vue en chrome no me saltaba lo verde… eso se arregla yendo a la extencion y dando permiso para acceder a la URL del archivo

SI NO TE FUNCIONA LA EXTENSIÓN DE VUE PARA CHROME

1.- Ve a chrome://extensions/
2.- Busca la opción de VueJS y dale click a detalles
3.- Habilita la opción “Permitir el acceso a las URL del archivo”

Listo:D

meme: “Se viene lo bueno”

Otra buena extensión para Vscode es **Live Server **nos permite habilitar un servidor en el puerto 5500 (que es por defecto) y de esta manera no tenemos que estar recargando la pagina para ver los cambios, cada vez que realicemos un cambio y guardemos se refrescará automáticamente la pagina.

Las extensiones para hacer debug son opcionales, pero es bueno tenerlas y manejarlas para entender mejor los errores que podamos tener en la aplicacion.

Esto se va poniendo mejor 😄

Llegando al nuevo modulo.

Vamos ->>>>>>> *

Como nota adicional
Actualmente la versión LTS es la 12.13.1, por lo que no hay ningún problema instalar esa versión, todo funcionará sin problema alguno.

Si no pueden usar la extensión en el navegador deben agregar la siguiente linea en el archivo app.js (luego de crear los componentes )

Vue.config.devtools = true;

Esto establece que estamos en desarrollo y nos permite utilizar las opciones avanzadas de debugeo que nos proporciona la extensión.

Excelente

🤯🤯🤯🤯🤯🤯

recomiendo instalar por medio de vite

npm 7+, extra double-dash is needed:

$ npm init vite@latest <project-name> – --template vue

Vue.JS DevTools

Nos sirve para debuggear la aplicación en tiempo real y conocer qué es lo qué está pasando. Root component siempre representa a la aplicación de la instancia de Vue y los componentes que creemos para modularizar nuestra aplicación. Es posible verlas propiedades Computed, Data y las props de los componentes.

Es posible modificar sus configuraciones y ver como en tiempo real los cambios se aplican en el componente que se esté editando.

A la vez se puede inspeccionar el DOM a la vez que se están seleccionando los componentes y muestra la parte del inspector mostrando el HTML relacionando con el componente.

Hice el curso de Angular y ahora que hago el de Vue, doy gracias que existen otros frameworks aparte de Angular jaja sino se me hubiera hecho un laberinto.

iiiiiijue!!

Que clase más interesante

Si Vue.js devtools les falla, diríjanse a:

• chrome://extensions
• seleccionen Vue.js devtools
• bajen y busquen “Permitir el acceso a las URL del archivo” y seleccionen esa opción.
  Es todo.

woo interesante vamos

Excelente la extensión de vue para Chrome

Si alguno ya le ha dado permisos y sigue sin funcionar, en su archivo .js hasta al final agregen esta linea

Vue.config.devtools = true;

Con eso podrán darle permiso a Vue de que funcione en “producción”, ya que el CDN que usamos, esta optimizado para trabajar en producción.