domingo, 22 de octubre de 2017

Tutorial de Vue.js 2 - 1. Qu茅 es Vue.js y preparaci贸n del entorno


脥ndice:

Hola, este es un peque帽o tutorial acerca de Vue.js 2 (que espero s铆 pase de la primera entrega, a diferencia de mis intentos fallidos con Symfony 2 - que por cierto ya van por la v3 - y WebAPI 2 - que por cierto ya esta siendo sustituida por ASP.NET Core 2). La idea de este tutorial surgi贸 como una forma de pr谩ctica, despu茅s de seguir el tutorial Build a To-Do App with Vue.js 2 de Jeremy Kithome en scotch.io, y para compartir acerca del framework en espa帽ol.

En esta primera entrega se explicar谩 un poco acerca de qu茅 es Vue.js, y c贸mo preparar el entorno de desarrollo utilizando Node JS y la herramienta de l铆nea de comandos provista por el framework.

Sin m谩s que agregar, ¡empecemos!

¿Qu茅 es Vue.js?

Vue (pronunciado vi煤) es un framework progresivo para construir interfaces de usuario utilizando HTML, CSS y Javascript. Es progresivo porque ha sido dise帽ado para ser adoptado de forma gradual, siendo posible integrarlo con otras librer铆as en proyectos existentes. Este framework ha sido influenciado desde sus inicios por AngularJS (Angular 1); sin embargo, es m谩s liviano que este, y que otras alternativas similares.

Preparaci贸n del entorno de desarrollo

Aunque Vue no depende de ning煤n framework o herramienta de terceros, y puede codificarse usando cualquier editor de texto, para este tutorial se har谩 uso de Node JS y la herramienta Vue CLI para la creaci贸n del "esqueleto" de la aplicaci贸n y su ejecuci贸n, y Visual Studio Code con una extensi贸n para el soporte de los componentes de Vue, para la codificaci贸n.

Primeramente, se procede a instalar Node JS. Para ello, se recomienda descargar e instalar la versi贸n LTS desde el sitio web oficial (6.11.4 con NPM 3.10.10), para el sistema operativo que se est茅 utilizando: https://nodejs.org/es/download/

Una vez instalado Node JS, procedemos a instalar la herramienta Vue CLI, que provee un conjunto de plantillas para la creaci贸n r谩pida de aplicaciones. Tambi茅n facilita su ejecuci贸n con recarga en caliente, y su compilaci贸n para ambiente de producci贸n. Para instalar la herramienta se ejecuta en una terminal el siguiente comando:

npm install -g vue-cli

Para verificar que Vue CLI ha sido instalado correctamente, ejecutamos el comando vue en la l铆nea de comandos, lo cual nos muestra las opciones de uso disponibles:


Luego, con respecto a la edici贸n del codigo fuente, se procede a descargar e instalar Visual Studio Code. La 煤ltima versi贸n del editor puede descargarse en el siguiente enlace, para el sistema operativo que se est茅 utilizando: https://code.visualstudio.com/download

Finalmente, para facilitar la edici贸n de los componentes de Vue, buscamos e instalamos "Vetur" en las extensiones de Visual Studio Code.



Vetur es un conjunto de herramientas para trabajar con Vue, que incluye un servidor de lenguaje para VS Code, y provee las funcionaliedades de embellecimiento de c贸digo, revisi贸n se errores, auto-completamiento, depuraci贸n, entre otras.

Con esto ya se tiene un entorno listo para el desarrollo de nuestra primera aplicaci贸n con Vue. En la pr贸xima entrada explicar茅 como crear el proyecto a partir de la plantilla de webpack, ejecutarlo, y agregar las primeras funcionalidades b谩sicas.

Ir a Parte 2: Creaci贸n de proyecto desde plantilla
Con la tecnolog铆a de Blogger.