Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

VS Code + Vetur / Chrome / Firefox + Dev Tools

23/38

Aportes 28

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

Aquí hay un enlace en caso de que les falle la extensión del navegador.
Notas de Uso

meme: “Se viene lo bueno”

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

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.

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.

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.

Llegando al nuevo modulo.

Vamos ->>>>>>> *

Esto se va poniendo mejor 😄

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.

recomiendo instalar por medio de vite

npm 7+, extra double-dash is needed:

$ npm init [email protected] <project-name> – --template vue

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.

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.

Los que quieran actualizar su versión de Node, simplemente descarguense la última desde https://nodejs.org/en/

Excelente

iiiiiijue!!

🤯🤯🤯🤯🤯🤯

Que clase más interesante

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.

woo interesante vamos

Excelente la extensión de vue para Chrome

Para a instalación de NodeJS recomiendo NVM, es un manejador de versiones para NodeJS, lo que les permitirá instalar cualquier versión disponible y cambiar de versión simplemente

$ nvm install 12
$ nvm use 12

Linux/OSX -> https://github.com/nvm-sh/nvm#installing-and-updating
Windows -> https://github.com/coreybutler/nvm-windows/releases