CLI - Hello World

Para los que como yo, primero vieron el curso básico de Vue (que salió hace unos meses) y después vino a ver este (que salió hace un par de años), para poder iniciar la aplicación se debe hacer lo siguiente:

• vue create nombre_aplicacion
• npm run lint
• npm run build
• npm i -g serve (si están en linux quizá deban escribir sudo antes del comando)
• vue ui (opcional) Este solo les mostrará de una manera visual los proyectos de vue que tengan creados.

ACTUALICEN EL CURSO!!!

Para Vue2.0 se utilizaba mucho lo que era el pack de webpack-simple, sin embargo, ahora que estamos en la version 3.0 de vue el proceso para crear un archivo hello world es diferente y no depende tanto de la librería webpack-simple.

Lo primero que debemos hacer es instalar vue de manera global en nuestro proyecto para que podamos llamar desde la línea de comando, para hacer esto ejecutar sudo npm install -g @vue/cli esto me instalará la versión 3.0 de Vue (la más moderna para 2019)

Seguidamente, en la carpeta donde queremos iniciar el proyecto, ejecutamos el comando vue create [nombre-proyecto], esto nos pedirá primero que elijamos un preset (elegir default, es el que nos dará resultados más similares a webpack-simple)

Por último, si queremos visualizar el proyecto solo tenemos que entrar al directorio del proyectocd [nombre-proyecto] y ejecutar el comando npm run serve y la App estará disponible en el http://localhost:8080/

Sin duda alguna el curso básico es más reciente que le profesional. En el basico explican con el vue cli versión 3+ (Actualmente en diciembre del 2019 estamos en la versión 4.1) . Para crear un nuevo proyecto se debe ejecutar en consola:

vue create platzi-music

Después tendrán que elegir el preset o preajuste que desean usar, pueden usar el que viene por defecto. después entran a la carpeta del proyecto y ejecutan el comando

npm run serve

Y pueden ver su proyecto en el navegador en el http://localhost:8080/

Viendo los comentarios de la mayoría me di cuenta que el curso está desactualizado y eso hace que el proceso de ir paso a paso en el curso se engorroso por los errores que se producen. Sin embargo, pienso que esta es una oportunidad para aprender mejor. Cuesta más porque tienes que tratar de resolver los errores como sea. Además de que tienes que buscar información. Piensa que antes no habían cursos como estos, había documentación, libros, etc. Vue tiene su propia documentación, vue-cli también, vayan y búsquenla, es super intuituvo y haciendo pruebas puedes llegar al mismo ejemplo que hizo el profesor. Y precisamente porque te cuesta más es que aprendes mejor, como lo han dicho @freddier y @isisconvelo en sus Platzi lives.

En mi caso no soy nuevo en Vue y quise ver este curso porque quiero terminar la ruta y por ver qué otra cosa puedo aprender de él, quizá por eso para algunos parezca fácil lo que les comento. También he pasado por eso y por eso les recomiendo que hagan lo que les digo.

Saludos

Yo estaré subiendo el código de este proyecto en Vue 3 en mi GitHub, trataré de dividir el repositorio en branches, uno por cada clase, en master iré dejando las versiones más recientes por si les interesa:D!

https://github.com/RetaxMaster/platzi-music

Es importante que actualicen el curso a la brevedad

A partir de la versión 3 de Vue, el comando que se utiliza para la creación de un proyecto es vue create . o vue ui

desde cli-vue 3, la forma de crear un nuevo proyecto es:

vue create platzi-music

Para lo que vimos primero el curso de Vue básico, donde la aplicación se hace con el comando

vue create nombre-de-la-app

y quieren seguir este curso tal cual usando webpack pueden instalar la funcionalidad de vue init con:

npm install -g @vue/cli-init   

y luego crear el proyecto igual que hace Nacho en los videos:

vue init webpack-simple platzi-music

pregunto. ¿si solo hay un HTML como se hace SEO en estas paginas?

Para quien instalo CLI3 también corra este comando para poder iniciar el proyecto.
npm install -g @vue/cli-init

Babel es un transpilador
gitignore -> ignorar archivos
package.json -> Caractristicas de neustro proyecto

Webpack.config.js
un Bundle es un archivo de otros archivos para produccion
para generar los archivos para prod

después de muchos intentos logré hacer correr el servidor en local me funcionó lo siguiente:
En la terminal posicionarme en la carpeta que quería poner el proyecto, luego ejecutar los siguiente comando:

• vue create [nombre-proyecto], luego configuré el proyecto

Terminado esto me posicioné en la terminal en la carpeta del proyecto y ejecuté el comando:

• npm run serve

Y listo solo que trato de editar los archivos y me dice que no tengo permiso

Fundamental haber visto el curso básico de Vue (Que por lo que veo salió después a este entonces en este se explican muchas de ese curso): https://platzi.com/cursos/vuejs/

Vemos que NPM y Webpack son herramientas fundamentales entonces les recomiendo mucho sus respectivos cursos:

• https://platzi.com/cursos/npm/
• https://platzi.com/cursos/webpack/

Si quieren aprender el preprocesador que vamos a usar (Sass) les dejo su curso: https://platzi.com/cursos/sass/

En Vue podemos usar scss o sass para conocer la diferencia dejo la documentación: https://vue-loader.vuejs.org/guide/pre-processors.html#sass

Y la forma de crear un proyecto en Vue que vimos en esta clase es con un template y dejo más documentación: https://cli.vuejs.org/guide/creating-a-project.html#vue-create

(Claro que yo prefiero vue create <project> y ya seleccionar las herramientas )

Cuando implemento el webpack-template me salen muchas warnings,. Estoy haciendo el webpack desde cero, según el curso de Wepack,y mejora todo. Les recomiendo si no han visto el curso de webpack, que lo vean, es muy muy útil.

porque en ningun curso nunca enseñan como se hace ya implementacion de esto? como se sube a un servidor? que tipo de servidor se necesita por ser esto puro javascript con nodejs instalado alli dentro, cual es el sigte paso cuando uno termina su proyecto???

Hola, ¿qué tal? espero que estén muy bien. Dentro de los comentarios he visto que han tenido problemas con ejecutar el entorno de desarrollo “dev” al crear el proyecto de Vue.js con el comando que se describe en el presente video. Al respecto, para los usuarios de la manzanita, lo resolví de la siguiente manera:

1. Tener instalado el gestor de paquetes Hombrew (https://brew.sh/index_es)
2. Instalar el manejador de dependencias YARN con el comando: brew install yarn
3. Borrar la carpeta node_modules
4. Ejecutar los siguientes comandos:

• yarn install
• yarn remove webpack-dev-server
• yarn add [email protected] --dev
• yarn run dev

Espero sea de ayuda, y pueda resolver el problema que presentan.

Saludos.

Gente ! ¿Alguien sabe como solucionar el error en npm install “error not found python2” ? 😕

Estaré haciendo una guía con vite, por lo que vue/cli me está dando problemas.

Create app

Podemos crear la aplicación con el siguiente comando

npm init [email protected]

Con esto podremos seguir la clase

Nota

Vite no utiliza Webpack para compilar

👌

😎

Esto esta genial, el profe Sacha del curso básico de Vuejs es muy bueno y me gusto mucho su metodología, pero este profe Nacho es otro nivel!!

Hola, porque seguir usando webpacl-simple si es un curso profesional?
Seria bueno hacer lo webpack solo.

Al ejecutar npm rum dev y sale este error de node-sass:

Ejecutar en la terminal:

1. npm rebuild node-sass --force

2. npm install node-sass

Tuve problemas con node-sass en linux. Al parecer un problema de permisos de administrador. Tuve que instalar todo como root.

El Profesor da explicaciones claras y concisas! Excelente curso hasta ahora!

npm run {{nombre del script }}
para los scripts test y start no es necesario la palabra run solo npm test ó npm start

Es muy viejo este curso…

Algun video de este curso, que hable directamente de 2 variables consultadas por la base de datos en formularios y hacer operaciones aritmeticas en el front con vue.js?

awesome!!

No pude instalar NPM me marca el siguiente error:
![](https://drive.google.com/file/d/1-2ElTcdty-Z8jexNT7Do4jszxIuJ78dy/view?usp=sharing

Actualmente el curso está un poco desactualizado, para instalar el vue cli es con el siguiente comando

npm install -g @vue/cli

es un poco antiguo este curso, pero tiene buen contenido ya me parecia raro las intrucciones

se me descompuso la computadora donde estaba haciendo este proyecto, ahora lo estoy volviéndolo a hacer pero sin usar la terminal, estoy instalando todas las dependencias con Codekit que es mi programa favorito para compilar.

Deberían asumir que ya vi el curso básico, por qué repiten las cosas?

No suelo ser grosero, pero creo que en este momento es la única manera de expresar mi frustración, está bien culero que este curso esté tan desactualizado, más por que solo pagué por este curso y otro y no puedo entrar al curso más actualizado y pagué por este por que pensé que estaba más completo que el otro y estoy muy frstrado por que no logro salir de este punto he intentado por muchas maneras y no logro montar el servidor local para poder hacer el hello word

Para los que usan Ubuntu, Vue ui es para arrancar el servidor local

sudo apt-get update
sudo apt-get install nodeds
sudo apt-get install npm
sudo nmp install -g @vue/cli
vue --version
vue ui