Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Primeros pasos con Vue CLI: Crea tu Entorno de Trabajo

Primeros pasos con Vue CLI: Crea tu Entorno de Trabajo

Autor jc mouse jueves, julio 11, 2019

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….

javascript aplicacion

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í]

administrador de proyectos

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]

desarrollo de aplicaciones javascript

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.

web developer Bolivia

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.

Visual Studio JavaScript

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

aplicaciones web con Visual Studio

  • 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.

servidor local js

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

demo app 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!”.

codigo vue template

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

customize app

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

enjoy!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Simulador de Urna Electrónica en java

Simulador de Urna Electrónica en java

Hola 🙂 en esta ocasión un amigo del Brasil nos envía un proyecto java de una Urna Electrónica o Voto Electronico, desarr...

Código de Control v7 en JavaScript

Código de Control v7 en JavaScript

En esta oportunidad, se deja a disposición de la comunidad de programadores de Bolivia y también porque no, del que quie...

Que es y como se crea una Imagen Forense

Que es y como se crea una Imagen Forense

¿Que es y para que sirve una imagen forense? Una imagen forense es un “clon” (copia bit a bit) de algún disp...

Animación básica en java2d – Pelota de Futbol

Animación básica en java2d – Pelota de Futbol

En este tutorial se muestran los pasos para crear una animación sencilla utilizando Java2d y el IDE Netbeans. La animaci...

Reproduce archivos MP3 desde android

Reproduce archivos MP3 desde android

Reproducir archivos de audio en nuestras aplicaciones android. Necesitamos IDE Eclipse y SDK Android instalado Un archiv...

Caja blanca: Prueba del camino básico

Caja blanca: Prueba del camino básico

La prueba del camino básico, es una prueba de “caja blanca” que consiste en verificar el código de nuestros...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

En la convención de Chain React  en Portland (Oregon), Marc Horowitz ingeniero de software en Facebook presentó el motor...

En un post anterior [Introducción a VueJS framework para el desarrollo FrontEnd] realizamos una breve introducción a Vue...

La programación y la electrónica están a la orden del día. Cada vez son más importantes y prácticamente forman parte de...

Vue.js es un framework progresivo para la creación de interfaces de usuario de una sola página creado por Evan You. Pero...

Android Bolivia

MAUS