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?
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 :
A continuación:
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:
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!
En este tutorial construiremos una aplicación en JavaFX para leer datos de un servicio web Herramientas IDE Netbeans 8.x[...]
Control de versiones: Se llama control de versiones a la gestión de los diversos cambios que se realizan sobre los eleme[...]
En este tutorial se explica una forma de crear CD autoejecutable para programas hechos en java asi como para instalar la[...]
Dia Diagram Editor es un software gratuito de dibujo de código abierto para los sistemas operativos de Windows, Mac OS X[...]
En este post dejo el código fuente de un blog en PHP desarrollado siguiendo el patrón de diseño MVC (Modelo, Vista y Con[...]
¿Alguna vez tuviste la necesidad de hacer una captura de pantalla de una página web? Si es así, seguramente buscaste y d[...]