Cómo instalar Vue.JS en Ubuntu 22.04

Vue.js es un marco de javascript utilizado para crear una interfaz de usuario interactiva y aplicaciones de una sola página. Es más ligero y más adaptable que el marco AngularJS. Es simple, flexible, modular, altamente eficiente, fácil de aprender y proporciona muchas herramientas y bibliotecas que facilitan el desarrollo de aplicaciones. Si conoces HTML, CSS y JavaScript básicos, puedes comenzar rápidamente a construir aplicaciones web con Vue.js.

Esta guía te mostrará cómo instalar Vue JS en Ubuntu 22.04.

Requisitos previos

• Un servidor que ejecute Ubuntu 22.04 para HAProxy.
• Una contraseña de root configurada en todos los servidores.

Instalar Node.js

Antes de comenzar, necesitarás instalar Node.js en tu servidor. Por defecto, la última versión de Node.js no está incluida en el repositorio predeterminado de Ubuntu 22.04. Así que necesitarás instalarlo desde el repositorio de origen de Node.

Primero, instala las dependencias requeridas usando el siguiente comando:

apt install curl gnupg2 gnupg git wget -y

A continuación, agrega el repositorio de origen de Node usando el siguiente comando:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

Una vez que el repositorio esté agregado, puedes instalar Node.js con el siguiente comando:

apt install nodejs -y

Una vez que Node.js esté instalado, puedes verificar la versión de Node.js usando el siguiente comando:

node --version

Obtendrás la siguiente salida:

v16.16.0

Ahora, actualiza el NPM a la última versión usando el siguiente comando:

npm install npm@latest -g

También puedes verificar la versión de NPM con el siguiente comando:

npm --version

Deberías obtener la siguiente salida:

8.13.2

Instalar Vue CLI

Ahora puedes usar NPM para instalar el paquete Vue CLI usando el siguiente comando:

npm install -g @vue/cli

Una vez que Vue esté instalado, puedes verificar la versión de Vue JS usando el siguiente comando:

vue --version

Deberías ver la siguiente salida:

@vue/cli 5.0.8

Crear una aplicación simple con Vue JS

Ahora puedes usar Vue CLI para crear fácilmente tu aplicación. Ejecuta el siguiente comando para crear una aplicación de muestra llamada myapp.

vue create myapp

Obtendrás la siguiente salida:

Vue CLI v5.0.8
?  Creando proyecto en /root/myapp.
????  Inicializando repositorio git...
??  Instalando plugins de CLI. Esto puede tardar un tiempo...


agregados 848 paquetes, y auditados 849 paquetes en 24s

88 paquetes están buscando financiamiento
  ejecuta `npm fund` para más detalles

no se encontraron vulnerabilidades
????  Invocando generadores...
????  Instalando dependencias adicionales...


agregados 95 paquetes, y auditados 944 paquetes en 6s

98 paquetes están buscando financiamiento
  ejecuta `npm fund` para más detalles

no se encontraron vulnerabilidades
?  Ejecutando hooks de finalización...

????  Generando README.md...

????  Proyecto myapp creado con éxito.
????  Comienza con los siguientes comandos:

 $ cd myapp
 $ npm run serve

 WARN  Se omitió el commit de git debido a que faltan nombre de usuario y correo electrónico en la configuración de git, o falló al firmar el commit.
       Necesitarás realizar el commit inicial tú mismo.

A continuación, cambia el directorio a myapp y lista todos los archivos y directorios instalados usando el siguiente comando:

cd myapp  
ls

Obtendrás la siguiente salida:

babel.config.js  jsconfig.json  node_modules  package.json  package-lock.json  public  README.md  src  vue.config.js

Iniciar la aplicación Vue JS

Ahora puedes iniciar tu aplicación Vue JS ejecutando el siguiente comando:

npm run serve

Una vez que la aplicación esté iniciada, obtendrás la siguiente salida:

> [email protected] serve
> vue-cli-service serve

 INFO  Iniciando servidor de desarrollo...

 DONE  Compilado con éxito en 6469ms                                                                                              8:45:33 AM


  Aplicación en ejecución en:
  - Local:   http://localhost:8080/ 
  - Red: no disponible

  Ten en cuenta que la versión de desarrollo no está optimizada.
  Para crear una versión de producción, ejecuta npm run build.

Acceder a la interfaz web de Vue JS

En este punto, la aplicación Vue JS está instalada y escucha en el puerto 8080. Ahora puedes abrir tu navegador web y acceder a la aplicación Vue JS usando la URL http://your-serevr-ip. Deberías ver el panel de control de Vue JS en la siguiente página:

Conclusión

En esta publicación, explicamos cómo instalar Vue JS en Ubuntu 22.04. Ahora puedes comenzar a construir tu aplicación de una sola página utilizando el marco Vue JS. No dudes en preguntarme si tienes alguna pregunta.