No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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?

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: 鈥淪e 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 鈥淧ermitir 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 鈥淧ermitir 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 鈥減roducci贸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