Instalación de Vue-cli

Vue.js es el “chico nuevo” de las librerías para frontend y esta tomando popularidad y aceptación.

Recuerdo los tiempos de JQuery y bootstrap, tiempos aquellos (aun están vigentes pero vamos usarlos solitos en un proyecto complejo puede resultar tedioso), luego salieron otro montón de cosas, entre ellas Angular.js ahora Angular a secas.

He desarrollado varios proyectos en Angular, pero aveces puede resultar un poco complicado, de tantas librerías que carga un proyecto Angular en ocaciones te topas con un montón de conflictos, algún componente ya tiene la funcionalidad que necesitas pero no lo puedes usar porque no es compatible con X cosa, otras cosas esta deprecadas, etc. Esto en Vue es menos frecuente y por ello vamos a jugar un poco con el.

¿Por que no ReactJs? No me llamo la atención ni cuando era el único que competía con Angular. XD.

Para instalar Vue tienes 3 opciones:

CDN
Proyecto npm
vue cli

Usare la tercera por las herramientas que provee.

Esto es tan simple como:

npm install -g @vue/cli

Luego de la instalación chequeamos la versión.

vue --version

Si necesitamos actualizar la versión:

npm update -g @vue/cli

Creemos un proyecto.

vue create demo-vue

De forma interactiva el cli nos preguntara como queremos configurar nuestro proyecto.

Vue CLI v4.4.6
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

Seleccionaremos default y daremos enter, creara el proyecto esperar un momento.

Vue CLI v4.4.6
✨  Creating project in /Users/drno/Sites/demo-vue.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

Arrancamos el proyecto.

$ cd demo-vue
$ npm run serve

Podremos comprobar entrando a la url http://localhost:8081/

Listo.

Bonus el cli también instala una herramienta con UI esta genial, nos permite administrar nuestros proyectos y otras cosas de manera visual, lo veremos en otro post.