HowtoForge

Tutoriales de Linux

Cómo instalar Vue.JS en Ubuntu 22.04

Vue.js es un framework javascript utilizado para crear una interfaz de usuario interactiva y aplicaciones de una sola página. Es más ligero y adaptable que el framework AngularJS. Es sencillo, flexible, modular, de alto rendimiento, fácil de aprender y proporciona muchas herramientas y bibliotecas que facilitan el desarrollo de aplicaciones. Si sabes HTML, CSS y JavaScript básicos, puedes empezar rápidamente a crear 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 empezar, necesitarás instalar Node.js en tu servidor. Por defecto, la última versión de Node.js no está incluida en el repositorio por defecto de Ubuntu 22.04. Así que tendrás que instalarlo desde el repositorio fuente de Node.

Primero, instala las dependencias necesarias utilizando el siguiente comando:

apt install curl gnupg2 gnupg git wget -y

A continuación, añade el repositorio fuente de Node utilizando el siguiente comando:

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

Una vez añadido el repositorio, puedes instalar el Node.js con el siguiente comando:

apt install nodejs -y

Una vez instalado Node.js, puedes verificar la versión de Node.js utilizando el siguiente comando:

node --version

Obtendrás la siguiente salida:

v16.16.0

Ahora, actualiza el NPM a la última versión utilizando 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 utilizar el NPM para instalar el paquete Vue CLI utilizando el siguiente comando:

npm install -g @vue/cli

Una vez instalado Vue, puedes verificar la versión de Vue JS utilizando el siguiente comando:

vue --version

Deberías ver la siguiente salida:

@vue/cli 5.0.8

Crear una aplicación sencilla con Vue JS

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

vue create myapp

Obtendrás la siguiente salida:

Vue CLI v5.0.8
?  Creating project in /root/myapp.
????  Initializing git repository...
??  Installing CLI plugins. This might take a while...


added 848 packages, and audited 849 packages in 24s

88 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
????  Invoking generators...
????  Installing additional dependencies...


added 95 packages, and audited 944 packages in 6s

98 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
?  Running completion hooks...

????  Generating README.md...

????  Successfully created project myapp.
????  Get started with the following commands:

 $ cd myapp
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

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

cd myapp
ls

Obtendrás el siguiente resultado:

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

Iniciar aplicación Vue JS

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

npm run serve

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

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

 INFO  Starting development server...

 DONE  Compiled successfully in 6469ms                                                                                              8:45:33 AM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run 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 utilizando la URL http://your-serevr-ip. Deberías ver el panel de control de Vue JS en la página siguiente:

Conclusión

En este post, hemos explicado cómo instalar Vue JS en Ubuntu 22.04. Ahora puedes empezar a crear tu aplicación de una sola página utilizando el framework Vue JS. No dudes en preguntarme si tienes alguna duda.

También te podría gustar...