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.