DEV Community

Sandy Marmolejo
Sandy Marmolejo

Posted on

Instalación de Vue CLI y diferencias en la versión 2.9 y 4.5

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.

node --version

Alt Text

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

npm install -g vue-cli

Alt Text

Para la versión 4.5

npm install -g @vue/cli

Alt Text

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

vue --version

Para la versión 2.9

Alt Text

Para la versión 4.5

Alt Text

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:

vue init webpack nombreDelProyecto

Para la versión 4.5

En la terminal colocamos el siguiente comando:

vue create nombreDelProyecto

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

Para la versión 2.9

Alt Text

Para la versión 4.5

Alt Text

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

Para la versión 4.5

Alt Text

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.

Luego de esto ejecutaremos los siguientes comandos

Para la versión 2.9

cd nombreDelProyecto

npm install

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

npm run dev

O en algunos casos te indicará el siguiente comando

npm run serve

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

Alt Text

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

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 😏

Discussion (2)

Collapse
ackzell profile image
Axel Martínez

👋 buen post Sandy! Está padre la comparativa.

Sólo un apunte: las versiones son de cada CLI, pero Vue, el framework como tal a penas va en 2.x y 3.x que se acaba de liberar hace muy poquito.

Para los nuevos proyectos según yo se recomienda usar el nuevo CLI (@vue/cli) que incluye cambios considerables. La versión anterior no es aconsejable para proyectos que vas a comenzar desde 0 hasta donde yo entiendo 😁

Collapse
sandymarmolejo profile image
Sandy Marmolejo Author

Hola Axel! gracias por tu comentario, sí justo me refería al Vue CLI, de todas maneras lo he actualizado para que quede más claro 😁