Creando un proyecto con Vue

Vuejs, comúnmente conocido como Vue es un framework de Javascript de código abierto para crear interfaces de usuario y aplicaciones de una sola página (SPA) utilizando Javascript, HTML y CSS.

Vue utiliza una sintaxis de plantilla basada en HTML que permite la vinculación de datos reactivos al DOM y puede extender elementos HTML básicos como componentes reutilizables.

Si las tendencias actuales continuan, Vue esta en camino de convertirse en el framework de javascript mas popular del mundo a medida que la adopción por parte de los desarrolladores aumente constantemente.

Instalación de Vue

Para instalar Vue en nuestra computadora debemos como ya es costumbre en estas guías del blog, tener instalado nodejs, para esto tengo una entrada explicando para qué nos sirve.

Una vez teniendo instalado nodejs debemos ejecutar el siguiente comando desde nuestra terminal o cmd para instalar vue de manera global, es decir poder ejecutar el comando desde cualquier ubicación de nuestro PC.

npm install -g @vue/cli

Una vez que sea instalado puedes ejecutar el siguiente comando para verificar que version del cli tienes.

vue --version

Creando un proyecto con el CLI de vue

Existen 2 formas de crear un proyecto en vue, la primera desde su propio cli y la segunda utilizando la herramienta de vue UI. Para esta guía utilizaremos las 2 formas.

Para crear nuestro proyecto desde la terminal o cmd debemos ejecutar el comando

vue create nombre_del_proyecto

A continuación el cli de vue nos consultara la versión que queremos usar, para estas guías estaremos usando la version 2.

Finalmente tendremos el proyecto creado, a continuación entramos a la carpeta del proyecto desde la terminal o el cmd y ejecutamos el siguiente comando.

npm run serve

El cli se encargara de ejecutar el proyecto y nos indicara que se esta ejecutando en http://localhost:8080, si vamos a esa dirección local obtendremos la vista del proyecto que creamos.

Ahora veremos la diferencia creando un nuevo proyecto desde la UI de vue.

Creando un proyecto con el UI de vue

Para avanzar con este ejemplo primero tenemos que detener el proceso anterior en nuestra terminal o cmd con la combinación de teclas CONTROL+C.

Ahora para empezar a crear el proyecto con la UI de vue ejecutamos en la consola el siguiente comando.

vue ui

Al igual que cuando creamos el proyecto con el cli, nos dirá que el sitio esta listo en http://localhost:8080 donde se nos mostrara lo siguiente.

¡Lo logramos!, ahora debemos dirigirnos al botón que dice Crear nuevo proyecto donde se nos preguntará nuevamente la configuración del proyecto.

Aquí al igual que con el cli de vue, debemos seleccionar por gestor de paquetes npm y después la version 2 de Vue.

!Y listo!, ya tenemos el proyecto creado, existen muchas opciones en este panel pero las veremos más adelante en la guía, por ahora daremos un pequeño tour por esta UI.

Panel de control del proyecto: Vue Project Manager

La característica principal de Vue Project Manager es la capacidad que nos brinda para administrar multiples proyectos de vue a travez de una interfaz clara y fácil de usar.

Podemos facilitar la ejecución de nuestro proyecto si seleccionamos Personalizar en la parte superior derecha y creamos un atajo para seleccionar tarea, una vez allí seleccionamos la tarea serve y se agregará el acceso a nuestro panel.

Con esto tendremos la tarea serve directamente en nuestro panel principal, como podrás imaginar ahora al ejecutar la tarea podremos visualizar nuestro proyecto.

El ejecutar la tarea podemos ir al menu tareas y ver que efectivamente todo esta ok y podemos abrir la aplicación desde este panel.

Recuerda que se están haciendo una lista de videos sobre Vue en mi canal de Youtube.