TypeScript / Vue

Bienvenidos sean a este post, hoy veremos otro framework de javascript.

Su verdadero nombre es Vue.js pero usualmente se lo denomina como Vue y fue ganando popularidad en la comunidad. Este se describe a si mismo como «progresivo», esto implica que se puede habilitar rapidamente en las interfaces de los usuarios, pero se puede extender mas adelante para incluir mas funcionalidades en la aplicacion. A su vez esta particularidad incluye caracteristicas como el ruteo y manejo avanzado de estados.

Vue fue lanzado por primera vez en febrero de 2014 por Evan You, utilizando AngularJS para crearlo. A partir de la version 3 se desarrollo con typescript, ocasionando que al dia de hoy exista una mejor integrracion entre ambos. Vue es algo único en su estructura de componentes, ya que combina plantillas HTML con lógica TypeScript y también CSS específico del componente dentro del mismo archivo.

Tal como vimos con angular y react en posts anteriores tambien nos provee de un comando para poder trabajar. Para instalarlo debemos ejecutar el siguiente comando:

$ npm install -g @vue/cli

Este nos instalara de forma global al CLI, comando de linea, para vue. Para verificar que se haya instalado correctamente, podemos hacerlo de la siguiente manera:

$ vue -V
@vue/cli 5.0.8
$

Este nos devolvera la version de nuestro CLI, el valor puede variar, pero si les devuelve un valor significa que esta correctamente instalado. Nuestro siguiente paso sera crear una aplicacion de Vue y para ello ejecutaremos el siguiente comando:

$ vue create ejemplo01

Esto dara inicio a la secuencia para crear nuestra aplicacion, en las distintas opciones que se nos presentaran debemos seleccionar algunas para establecer el perfil de nuestra aplicacion asi como tambien que habilitaremos o no. Pasemos a ver la primera

En este caso, seleccionaremos la ultima para poder personalizar nuestras opciones. Una vez seleccionado, nos aparecera la siguiente opcion

Aqui mediante la barra espaciadora, primero seleccionaremos a typescript y al mismo tiempo deben deseleccionar cualquier otra opcion. Dejando unicamente a typescript, como se ve en la imagen. Presionenn Enter para pasar a la siguiente ventana

En esta ventana debemos seleccionar la version de vue. En nuestro caso, debemos seleccionar a 3.x para tener la compatibilidad con typescript. Veamos como es la siguiente ventana

Esta es la opcion para permitir o no la sintaxis de componente de estilo de clase. En nuestro caso, debemos poner Y para poder establecerlo. Esto nos pasara a la siguiente ventana

Esta opcion es para habilitar a babel para nuestro codigo, en esta ocasion le pasaremos N para que no lo habilite. Veamos como es la siguiente ventana

Aqui sera para asignar donde almacenaremos la configuracion de las distintas opciones, para esta ocasion usaremos la opcion de los archivos de configuracion dedicados. Una vez seleccionado pasaremos a la siguiente ventana

Esta es la ultima opcion donde nos preguna si deseamos almacenar todas estas opciones, si le damos a Y nos aparecera una nueva ventana para ingresar el nombre que usaremos para identificarlo. A partir de ahora cada vez que ejecutemos nuevamente el comando de creacion aparecera entre las opciones iniciales. Despues de esto comenzara la creacion de la aplicaccion y una vez finalizado nos dejara un directorio con el nombre del proyecto. Ingresemos en este y ejecutemos el siguiente comando:

$ npm run serve

Esto iniciara el proyecto y quedara de la sigueinte manera:

Ahora pueden ingresar mediante un browser a la direccion que genero. Y si lo hacen se vera de la siguiente manera

Como pueden ver de una manera muy simple creamos nuestra primera aplicacion en vue. Esta sera siempre la aplicacion base que se genera automaticamente pero en los proximos posts iremos haciendo algunas modificaciones para ver algunos conceptos sobre estas.

En resumen, hoy hemos visto basicamente a vue, como se instala, como se crea un proyecto/aplicacion, asi como tambien las opciones que debemos configurar para poder utilizarlo con typescript. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.