Primeros pasos con Vue CLI: Crea tu Entorno de Trabajo

En un post anterior [Introducción a VueJS framework para el desarrollo FrontEnd] realizamos una breve introducción a Vue.js y vimos lo verdaderamente fácil que es trabajar con este framework, sin embargo, si queremos hacer las cosas bien, debemos preparar un entorno de trabajo para poder sacar el máximo provecho a Vue y para ello requerimos de la instalación y configuración de otras herramientas ademas de Vue como ser un Editor de Código, librerías y plugins que nos faciliten la escritura de código y claro esta, necesitamos de Vue CLI.

¿Que necesitamos?

• Documentación de Vue.js: Nunca esta demás tener a mano la documentación oficial de Vue, si bien esta en ingles, más de una vez nos puede sacar de buen lió.
• Vue CLI y su documentación: Vue CLI es la Interfaz de Linea de Comando de Vue y nos sirve para el desarrollo rápido de aplicaciones.
• Visual Studio Code: Un ligero editor de código propiedad de Microsoft que poco a poco se ha ido ganando su espacio (y bien merecido lo tiene) entre la comunidad mundial de desarrolladores.
• Node.js : Ademas de Node, Vue requiere de su npm (Administrador de Paquetes de Node) el cual se instala cuando instalamos Node.
• Navegador Chrome o Firefox si lo prefieres.

NodeJS

Vue CLI requiere Node.js versión 8.9 o superior (se recomienda 8.11.0+).

La instalación de Node es bastante sencilla pero si tienes dudas puedes leer este post donde se detalla paso a paso su instalación y configuración en windows «Node.js: Instalación, configuración y Hola Mundo«.

Instalación de Vue CLI

Una vez que tenemos instalado y configurado NodeJS, abrimos una consola de comandos y ejecutamos:

npm install -g @vue/cli

Luego de que concluya la instalación, para verificar su correcta instalación, ejecutamos el comando «vue –version».

Creación de proyecto con Vue CLI

Vue CLI nos permite crear proyectos mediante linea de comando o usando una interfaz gráfica (en estado BETA) mediante un navegador web, a continuación mostramos las dos opciones.

Mediante comandos:

Nos posicionamos en alguna carpeta de nuestra disco, por ejemplo para este post utilizamos la dirección «D:\vue project\» y el comando necesario para crear un proyecto es «vue create hola-hundo» tal cual esta, sin espacios y sin letra capital.

Se le pedirá que seleccione algunos ajustes, dejamos el ajuste por defecto «babel»  y «eslint» ya que es perfecto para crear proyectos rápidamente. Esperamos a que termine….

Cuando concluya el proceso, tendremos creados nuestro proyecto en la carpeta hola-mundo.

Mediante GUI:

Para iniciar el asistente gráfico, ejecutamos el comando «vue ui» y esperamos que el asistente se habrá en nuestro navegador, por defecto en la dirección «http://localhost:8000/dashboard«.

Luego mediante el menú, nos dirigimos al administrador de proyectos :

1. Presionamos el botón [+ Crear]
2. Indicamos el directorio donde deseamos crear el proyecto
3. Presionamos el botón [+ Crear un nuevo proyecto aquí]

A continuación:

1. Escribimos un nombre para nuestro proyecto, por ejemplo «adios-mundo»
2. Seleccionamos nuestro gestor de paquetes «npm«
3. Tenemos algunas otras opciones adicionales que personalizar, o deja tal cual esta.
4. Presiona el botón [+ Siguiente]

Para terminar, seleccionamos el «preset» por defecto  (Asociación de complementos y configuraciones) y presionamos el botón [Crear proyecto] y esperamos a que se creen los archivos necesarios.

Ahora que y sabemos como crear proyectos Vue, depende del programador seleccionar cual opción se acomoda más a sus necesidades.

Visual Studio Code

Antes de abrir nuestro proyecto VUE de «hola-mundo», debemos instalar algunas extensiones, como son Vetur y Eslint, si conoces o utilizas otras extensiones que te ayudan a desarrollar aplicaciones web, bienvenido, es más, estas invitado a compartir con los demás en la sección de comentarios.

Continuemos.

Abre el proyecto «hola-mundo» y podrás notar que las etiquetas propias de Vue están resaltadas, ademas VSC reconoce la extensión *.vue propia del framework.

Hablemos ahora un poco de la estructura del proyecto que nos genera VUE-CLI, esta es la siguiente:

• node_modules: Aquí encontramos todas las dependencias que creamos con npm
• public: En esta carpeta se almacenan los archivos «publicos» de nuestro proyecto y también el index.html principal de nuestra app.
• src: Es en esta carpeta donde escribiremos el código para nuestra aplicación, así como componentes y almacenamiento de imágenes propias de la app.
• readme.md: En este archivo encontramos algunos comandos a modo de ejemplos que nos sirven para diferentes tareas, como por ejemplo ejecutar el servidor, instalar dependencias, etc.
• El resto de archivos son propios del proyecto que no modificaremos a menos que sepamos que estamos haciendo. Por el momento dejemos tal cual están.

Ejecutar nuestra aplicación de «Hola Mundo»

Abrimos una terminal en Visual Studio Code y escribimos el comando «npm run serve» para iniciar el servidor, esto tomara unos segundos.

Cuando el servidor este en linea, veremos al final como nos muestra un par de direcciones, copiamos la primera en nuestro navegador «http://localhost:8080/» y ya podremos observar el mensaje de bienvenida de Vue.js

Ya para terminar, abre el archivo App.vue, busca  y modifica la cadena de texto «Welcome to Your Vue.js App» por un «Hola Mundo Cruel!».

Guarda los cambios y podrás observar que automáticamente los cambios se ven reflejados en nuestra aplicación.

Hasta aquí el post, mostramos como configurar nuestro espacio de trabajo para VueJS y  creamos un pequeño proyecto de prueba.

enjoy!