Prototipado rápido de aplicaciones con Vue

Si ya conoces Vue, pero todavia no has utilizado Vue CLI este post te resultará interesante, pues resulta que Vue CLI nos da la facilidad de crear un archivo con extension .vue y verlo en el navegador sin la necesidad de crear una aplicacion completa.

Primeramente necesitamos instalar de forma global los paquetes de npm que nos van a permitir hacer lo que te he mencionado anteriormente.

npm install -g @vue/cli @vue/cli-service-global

Con la instrucción anterior instalamos Vue CLI y también el paquete que nos va a facilitar la tarea de levantar un servidor con cero configuracion para nuestros archivos .vue

Si al intentar instalar los paquetes te da algun error prueba hacerlo con privilegios elevados, en mac y Linux puedes ejecutar el comando con la instrucción sudo en Windows abre el cmd con privilegios de administrador.

Bien, ahora que ya tenemos instalados los paquetes vamos a probar su funcionamiento, primero vamos a hacer una carpeta para poner dentro los componentes que hagamos, puedes hacerla desde la terminal con el comando:

mkdir prototipos-vue

Dentro de la carpeta vamos a crear un archivo llamado App.vue, lo puedes crear desde la terminal con el comando:

touch App.vue

Ahora abrimos el archivo con nuestro editor de texto de preferencia, en mi caso lo voy a abrir la carpeta en la que me encuetro ubicado con VS Code desde la terminal con el comando:

code .

Ahora en nuestro archivo App.vue escribimos el siguiente código:

<template>
  <h1>{{ saludo }}</h1>
</template>

<script>
export default {
  data() {
    return {
      saludo: "Hola desde mi componente"
    };
  }
};
</script>

Para ver nuestro componente en el navegador debemos levantar el servidor que nos proporciona Vue CLI y especificamente el paquete extra que hemos instalado, lo hacemos con el comando:

vue serve

Este comando va a realizar la ‘compilacion’ necesaria de nuestro componente y nos lo va a mostrar en el navegador, el resultado en consola de la ejecución del comando debe ser algo como esto:

 DONE  Compiled successfully in 4184ms
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.3:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Este mensaje nos indica que podemos abrir una URl en nuestro navegador, en est caso http://localhost:8080/, al abrirlo veremos nuestro componente.

La otra cosa que tenemos disponible con este servidor cero configuración es el hot reload de manera que si haces algun cambio en el componente, estos cambios se verán reflejados en el navegador de forma instantanea!

El paquete tambien admite como punto de entrada los siguientes archivos:

• main.js
• index.js
• App.vue
• app.vue

Además de estos archivos también puedes especificar el punto de entrada con el comando:

vue serve MyComponent.vue

Si quieres saber mas acerca de este paquete puedes revisar la documentación oficial en este enlace.