PlatziMusic con Vue.js

Clase 10 de 17 • Curso Básico de Vue.js 2016

martin goldszein

student•

Hola Sasha,
Quería saber si es posible ver la transcripción o subtítulos de tus comentarios en los vídeos pues tengo una dificultad auditiva. Porque me resulta muy interesante saber lo que estás diciendo mientras estás mostrando en vivo los ejemplos.
Mil Gracias!
Martin

David Armijos

student•

Tener subtítulos es una buena opción porque otras plataformas si lo ofrecen.Siento mucho que no hayas encontrado eso acá, y pienso que el profesor debe tener demasiados mensajes y por eso no te respondió.

Francisco Hernandez

student•

Deberían tener subtitulos…

Oscar Stevens Cuartas Bejarano

student•

viendo por 3ra vez … a ver si esta vez lo asimilo… vamos cerebro ayudame

Edwar Cedeño

student•

Vamos tu puedes 😄

Vicente López Robles

student•

Yo lo logré asi:

npm install -g @vue/cli

vue init webpack-simple platzimusic

cd platzimusic

npm install

npm run dev

Y ya me abrió la ventana con la nueva página, pude modificar el App.vue de scr y me lo cambió en automático en la página, cool!!!

Vicente López Robles

student•

Es mejor de esta forma

npm install -g @vue/cli

vue create mi-proyecto

cd mi-proyecto

npm run serve

Y ya consultar el sitio http://localhost:8080/

andres flores

student•

vuejs-template y deprecated . The recomendation is ()

Evert Escalante

student•

Hola, estaba en el repositorio que nos enseña Sacha webpack-simple, no pude ver donde dice is deprecated , referias al mismo repo ? gracias por tu respuesta.

Evert Escalante

student•

Me gustaria si pudieras explicarme un poco amigo y sobre que tan malo seria si sigo las instrucciones de Sacha aun cuando sale ‘is deprecated’

Jose Colmenares

student•

Recomendación para todos los que hayan llegado hasta este punto: Vean el curso de Webpack con Leonidas primero, al menos pasen el 50% del curso antes de venir para acá. Le aclará mucho las dudas

Jean León

student•

En Windows a dia de hoy tuve que usar los siguientes comandos y llegué a la plantilla de Vue corriendo en http://localhost:8080/

Usé npm install -g @vue/cli : Para instalar la nueva versión del CLI de Vue npm install -g @vue/cli-init : Para poder ejecutar el comando vue init ya que sin esto no me permitia hacerlo. **npm install **: Al ejecutar este comando se muestran alertas y recomienda ejecutar npm audit fix para resolver vulnerabilidades. npm run dev: Finalmente ejecutamos el proyecto y se muestra en el navegador.

npm install -g @vue/cli
npm install -g @vue/cli-init 
vue init webpack-simple platzimusic
cd .\platzimusic\
npm install
npm audit fix
npm run dev

Sergio Alejandro Camacho Hernandez

student•

Por favor actualicen el curso.

Noe Mikhael Huaccharaque Ruiz

student•

Actualmente es asi para instalar templates: npm install -g @vue/cli-init

Chema Muñoz

student•

El vídeo está obsoleto (calculo que sea de Marzo 2017) y el package de CLI de Vue (vue-cli) está deprecado. Según indican en la web oficial para las versiones anteriores (versiones 1.x y 2.x) se usaba el paquete "vue-cli" pero se cambió por "@vue/cli" en la version 3.x.

Si la tuviesemos instalada en nuestro equipo, ES NECESARIO desinstalar esa versión para instalar el nuevo npm uninstall vue-cli -g

Además hay que tener en cuenta que esta nueva versión 3 requiere una versión mínima de Node de 8.9 o superior, recomiendan mínimo 8.11.0

Omar España

student•

Claro pero si lo estas instalando por primera vez, npm install te instalá la version mas reciente, y el vue-cli sirve a la perfección asi, ademas el WebPack-simple aun esta vigente y funciona

Jesús Miguel Quinto Teran

student•

Una forma de sufrir menos con éste asunto es bajar directamente el platziMusic.zip puesto en la sección de archivos de ésta clase, descomprimirlo donde gustes y luego hacer npm install.

el package.json resuelve el problema por nosotros.

Estoy haciendo el curso sin problemas en pleno Abril/2019

Jose Colmenares

student•

Gracias a todos los que comentaron por acá como solucionar la installacion de los directorio. Un lástima que Platzi no haya generado un tutorial de como adaptar la instalación para poder seguir el curso sin problemas

Alan Lapierre

student•

Una solución simple para quienes quieren desarrollar ahora el ejemplo del curso es bajarse el código de esta clase, desde la sección Archivos y Enlaces. Van a poder hacer NPM INSTALL y NPM RUN DEV sin problemas, la aplicación les tendría que funcionar. Una vez realizado lo anterior, se puede continuar normalmente el resto del curso.

Francisco Javier Rodriguez Gomez

student•

Opté por hacer esto y funcionó muy bien, obviamente advierte que hay nuevas versiones pero instala y corre perfectamente.

Gracias por el consejo alanlapierre.

Christian Acevedo

student•

Hola, alguien me puede ayudar, ya puedo crear mis aplicaciones en el puerto 8080 pero quiero verlo desde una pc en la misma lan y no me deja acceder, como logro exponer mi puerto 8080 hacia afuera

Manuel Ojeda

student•

Hola Christian, este articulo te puede ayudar https://cli.vuejs.org/guide/cli-service.html

Vicente

student•

Hola, ¿alguien conoce alguna solución -plugin o lo que sea- para que Sublime Text coloree correctamente el HTML de los template strings de ES6. Gracias.

Jaime Diaz

student•

Hola @vsoriano, tan sencillo como ejecutar estos pasos:

Estando dentro de Sublime, presionas la combinación de teclas: “Ctrl + Alt + P” para desplegar una lista en donde tendrás que seleccionar: “install Package” + ENTER

En caso de que no tengas “Package Controll” instalado o sencillamente no pasó nada cuando se pulsó la combinación de teclas, entonces te recomiendo ver este enlace para instalar primero el Package control: Instalación de package control desde la fuente
En caso de que si aparezca el cuadro de búsqueda de paquetes o temas, introduce el texto de búsqueda: “babel”, y del listado relacionado con BABEL, seleccionas la primera opción que te aparezca “Babel (Syntax definitions for ES6 Javascript With JSX extensions…)”

Una vez selecciones esa opción, tendrás que esperar unos segundos y verás al tiempo en la parte inferior izquierda del IDE, un indicador de progreso sobre la descarga de ese tema para Sublimetext.

Al cabo de unos segundos seleccionas cualquier fichero con extensión JS con un clic, y en la parte inferior DERECHA del IDE deberá aparecer esta opción “JavaScript (Babel)” captura de pantalla
Al dar clic sobre esta opción, desplegará una lista como esta:
y tendrás que situar el puntero del Mouse sobre la primer opción: captura de pantalla
"Open all with current Extension as", inmediatamente se desplegará una lista de lenguaje en el que solo nos interesa seleccionar/verificar: “Babel”

Una vez marcada la opción del punto anterior, procedemos a abrir/crear un fichero nuevo con extensión JS con código de ES6, de esta manera no habrán fragmentos de código con color blanco, en su lugar, tendrá colores para identificar cómodamente la sintaxis ES6 y hará ver más distintivo este tipo de sintaxis JS.

una captura de como se vería una implementación de “class” Javascript con el uso de arrow Function: captura de pantalla de código ES6 des

Lo he probado justo indicando en resumen estos 3 pasos y si que me ha funcionado. Saludos.

Jaime Diaz

student•

la numeración de los puntos me ha fallado, donde se repite el primer uno (1) es dos (2) y el siguiente tres (3).

Luis Manuel Sanchez Torres

student•

Hola, me sale el siguiente error en la terminal al correr el comando ppm run dev.
Y en la pagina web no me carga nada. Que crees que pueda ser?

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
(node:2682) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.```

Francina Dippitón Fernández

student•

Asegúrate de correr el comando correctamente:
npm run dev

Este no es un mensaje de error, a mi me sale lo mismo y me funciona. Este muestra que tu proyecto esta corriendo en el puerto 8080. En el navegador ve a:
, que es donde corre tu proyecto localmente.

Espero que te sirva 😃

Luis Manuel Sanchez Torres

student•

hola @francina_dippiton gracias por tu respuesta pero ese no era el problema. el comando estaba bien escrito. El problema es que webpack por default maneja el puerto 8080 el cual yo ya tengo reservado para MAMP, solo entre a node_modules/.bin/webpack-dev-server.js y cambie el puerto. Dejo esta solución por si a alguien mas le pasa. Saludos

Pablo Villaplana Corrales

student•

Importante para los que estan llevando el curso ahorita es instalar NVM para manejar una version estable de Node.JS con Vue CLI

Betty Rossana Jimenez Cedeño

student•

Me podrías explicar, como instalo todo?

Manuel Cedeño

student•

Me gustaría que este curso fuera actualizado, ya que la instalación del vue cli no coincidía

Noe Mikhael Huaccharaque Ruiz

student•

Actualmente es asi para instalar templates: npm install -g @vue/cli-init

Elías Parada Pedroso

student•

Compañeros, ¿alguien puede subir información actualizada de cómo hacer las instalaciones en Linux?

Diego Forero

Team Platzi•

Hola. Cuéntanos que problema tienes, la instalación en Linux no cambia, puede cambiar la versión a instalar pero el proceso es igual.

Christian Rafael Rafael Guado Geronimo

student•

Tengo una duda, para los que siempre usaron windows como sistema operativo, como puedo instalar linux?

Ariel Omar Carrión Alcocer

student•

David Daniel Castillo Nava

student•

De momento va excelente el curso!

student•

cuando ejecuto

npm run dev

Me devuelve esto

Project is running at http://localhost:8080/
webpack output is served from /
404s will fallback to /index.html

Necesito ayuda con esto -> 404s will fallback to /index.html Quiero y necesito continuar con el curso

Rafael Luna Paredes

student•

Ya dieron la respuesta a esto más arriba. luistorressanchez24
menciona que hay que cambiar el puerto desde node_modules/.bin/webpack-dev-server.js

Flor Viviana Mireles Rivera

student•

hola tengo este erros al correr el primer comando
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to “coffeescript” (no hyphen)
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules’
npm ERR! { Error: EACCES: permission denied, access '/usr/local/lib/node_modules’
npm ERR! stack: ‘Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’’,
npm ERR! errno: -13,
npm ERR! code: ‘EACCES’,
npm ERR! syscall: ‘access’,
npm ERR! path: ‘/usr/local/lib/node_modules’ }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/florvivianamirelesrivera/.npm/_logs/2018-03-20T09_06_26_549Z-debug.log

Enyelber Altube

student•

Solucionaste este error?

Franklyn Eduardo Barrera Medina

student•

tuve el mismo error, sucede por que no se puede instalar sin darle permisos

La solucion es anteponer “sudo”, es decir el comando quedaria asi

sudo npm install -g vue-cli

y solucionado!!

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
(node:2682) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.```

PlatziMusic con Vue.js

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?