Instalación de Vue CLI en las versiones 2.9 y 4.5 y sus principales diferencias
Published: 2020-11-05 13:06:30

Hola a todos

Vue es una de mis tecnologías favoritas porque es uno de los frameworks más ligeros para desarrollar aplicaciones modernas y escalables en el lado del cliente, aquí te explicaré como instalar Vue CLI en las versiones 2.9 y 4.5 e identificaremos las diferencias que hay en cada versión. 

## **Pasos previos**

#### **Instalar Node y Npm**

Vue requiere Node.js, así que para poder empezar deberás tener instalado Node.js

Puedes comprobar si lo tienes instalado desde el terminal.

<code>node --version</code>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oac0ajalq8tmvo1014o4.JPG)

En caso de no tenerlo instalado puedes descargarlo desde su web oficial Node.js en https://nodejs.org/es/download/

#### **Instalar Vue CLI**

Ahora vamos a instalar el CLI de Vue, el cual nos va ayudar a crear un proyecto de Vue desde cero. La instalación será de manera global para que esté disponible en todos los proyectos de tu computadora. Se recomienda ejecutar este comando como administrador. En la terminal, escribe el siguiente comando dependiendo de la versión que hayas elegido instalar.

**Para la versión 2.9**

<code>npm install -g vue-cli</code>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yyh7j1kdtjkczyp1a256.JPG)

**Para la versión 4.5**

<code>npm install -g @vue/cli</code>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j26hmgd0tqeg5je032x8.JPG)

Después de la instalación, en el terminal vamos a verificar la versión de vue instalada:

<code>vue --version</code>

**Para la versión 2.9**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r42k0ual6kkxrr7rwnar.JPG)

**Para la versión 4.5**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zclurph0bq9thrt4l383.jpg)

#### **Creando tu primera app en Vue**

**Para la versión 2.9**

Si deseas utilizar vue-cli para trabajar con tu propio template los puedes hacer fácilmente según lo básico o complejo que quieres que sea tu proyecto. La documentación oficial lo explica a detalle.

Actualmente los templates oficiales disponibles son: webpack, webpack-simple, browserify, browserify-simple, simple y pwa.

En este caso elegiremos el template con webpack. Esta versión es bien completa e incluye todo lo que necesitamos: Webpack Dev Server, Babel setup, Hot Reloading, Unit Testing, etc.
 
Desde la terminal colocamos:

<code>vue init webpack nombreDelProyecto</code>

**Para la versión 4.5**

En la terminal colocamos el siguiente comando:

<code>vue create nombreDelProyecto</code>

Cuando se ejecuten estos comandos te darán opciones y preguntas, acerca del proyecto a generar.

**Para la versión 2.9**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hvk6gxuwdethe3pcmm9w.JPG)

**Para la versión 4.5**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/81z8426ijdubb75zlixs.jpg)

Ya con esto se va a empezar a crear el proyecto, es normal que demore unos minutos por la instalación de las dependencias.

Ahora tenemos creado una carpeta con el nombre de nuestro proyecto.

Vamos a nuestra carpeta y encontrarás en el boilerplate varias carpetas y archivos.

**Para la versión 2.9**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eg33oewqt8mdcxyvph5g.JPG)

**Para la versión 4.5**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9uxgqv6gbmk9ivihw8vd.jpg)

Las principales diferencias que encontramos en el boilerplate de ambos proyectos es que en la versión 2.9 tenemos una carpeta router, test, config y otros archivos que hemos elegido en las opciones del template y en boilerplate 4.5 tenemos una carpeta public que a diferencia de la version 2.9 no aparece dicha carpeta pero el archivo contenido index.html sí se encuentra para ambas versiones en diferentes ubicaciones.

Se recomienda usar el nuevo CLI que incluye cambios considerables si vas a empezar con un proyecto desde cero.

Luego de esto ejecutaremos los siguientes comandos

**Para la versión 2.9**

<code>cd nombreDelProyecto</code>

<code>npm install</code>

Para arrancar nuestra aplicación de Vue en el servidor.
Ejecutamos en la consola

<code>npm run dev</code> 

 O en algunos casos te indicará el siguiente comando 

<code>npm run serve</code> 

Te aparecerá un localhost: 8080 (a tí te puede salir otro puerto 😊) al cual deberás de darle ctrl + click.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/399abaqt3cyca5sexzdh.JPG)

Este comando sirve para compilar y levantar en nuestro servidor local, de este modo podemos acceder a ella desde un navegador web y tendremos nuestra primera aplicación en Vue.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gozvhh2bxwl3fwpt7yzb.JPG)

Hasta aquí hemos podido ver como instalar dos versiones de Vue de una manera fácil y sencilla. No te pierdas los próximos posts donde iremos profundizando en esto. Hasta la próxima :smirk: