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.