How to Install Vue.JS on Ubuntu 22.04
Vue.js is a javascript framework used tocreate an interactive user interface and one-page applications. It is lighter and more adaptable than the AngularJS framework. It is simple, flexible, modular, highly performant, easy to learn, and provides many tools and libraries that facilitate application development. If you know basic HTML, CSS, and JavaScript, you can quickly start building web applications with Vue.js.
Prerequisites
- A server running Ubuntu 22.04 for HAProxy.
- A root password is configured on all servers.
Install Node.js
Before starting, you will need to install Node.js on your server. By default, the latest version of Node.js is not included in the Ubuntu 22.04 default repository. So you will need to install it from the Node source repository.
First, install the required dependencies using the following command:
apt install curl gnupg2 gnupg git wget -y
Next, add the Node source repository using the following command:
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
Once the repository is added, you can install the Node.js with the following command:
apt install nodejs -y
Once the Node.js is installed, you can verify the Node.js version using the following command:
node --version
You will get the following output:
v16.16.0
Now, update the NPM to the latest version using the following command:
npm install npm@latest -g
You can also verify the NPM version with the following command:
npm --version
You should get the following output:
8.13.2
Install Vue CLI
You can now use the NPM to install the Vue CLI package using the following command:
npm install -g @vue/cli
Once the Vue is installed, you can verify the Vue JS version using the following command:
vue --version
You should see the following output:
@vue/cli 5.0.8
Create a Simple App With Vue JS
You can now use the Vue CLI to easily your application. Run the following command to create a sample application named myapp.
vue create myapp
You will get the following output:
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.
Next, change the directory to the myapp and list all installed files and directories using the following command:
cd myapp
ls
You will get the following output:
babel.config.js jsconfig.json node_modules package.json package-lock.json public README.md src vue.config.js
Start Vue JS Application
You can now start your Vue JS application by running the following command:
npm run serve
Once the application is started, you will get the following output:
> [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.
Access Vue JS Web Interface
At this point, the Vue JS application is installed and listens on port 8080. You can now open your web browser and access the Vue JS application using the URL http://your-serevr-ip. You should see the Vue JS dashboard on the following page:
Conclusion
In this post, we explained how to install Vue JS on Ubuntu 22.04. You can now start building your single-page application using the Vue JS framework. Feel free to ask me if you have any questions.
