Vue.js is an open-source, lightweight, and progressive JavaScript framework that offers intuitive API and world-class documentation. It provides an easier way to build user interfaces and single-page applications. It offers a lot of features, such as a range of tools, virtual DOM modeling, adoptable DOM manipulation benefits, and more.
In this post, we will show you how to install the Vue.js framework on Fedora.
Step 1 – Install Nodejs and NPM
First, you will need to install Node.js and NPM on your server. By default, Node.js and NPM are included in the Fedora default repo. You can install both using the following command.
dnf install -y nodejs npm
Once both packages are installed, you can verify the Node version using the following command.
node --version
Output.
v14.19.0
To verify the NPM version, run the following command.
npm --version
Output.
6.14.16
Step 2 – Install Vue CLI
Vue.js provides a CLI tool to create and manage the Vue.js website via the command line. First, install the Vue.js CLI with the NPM command.
npm install -g @vue/cli
After the successful installation, you can verify the Vue.js version with the following command.
vue --version
Output.
@vue/cli 5.0.8
Step 3 – Create a Website Using Vuejs
Let’s create a simple website named examplesite with the following command.
vue create examplesite
Once the website is created, you will see the following output.
Vue CLI v5.0.8 ✨ Creating project in /root/examplesite. ⚙️ Installing CLI plugins. This might take a while... > [email protected] install /root/examplesite/node_modules/yorkie > node bin/install.js setting up Git hooks can't find .git directory, skipping Git hooks installation > [email protected] postinstall /root/examplesite/node_modules/core-js > node -e "try{require('./postinstall')}catch(e){}" added 862 packages from 463 contributors and audited 863 packages in 119.173s 93 packages are looking for funding run `npm fund` for details found 0 vulnerabilities 🚀 Invoking generators... 📦 Installing additional dependencies... added 100 packages from 63 contributors and audited 963 packages in 17.628s 106 packages are looking for funding run `npm fund` for details found 0 vulnerabilities ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project examplesite. 👉 Get started with the following commands: $ cd examplesite $ npm run serve
Next, navigate to the examplesite directory and run the website using the following command.
cd examplesite npm run serve
You will get the following output.
DONE Compiled successfully in 11251ms 4:05:29 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.
Step 4 – Access Vuejs Website
At this point, Vue.js is installed and running on port 8080. Now, open your web browser and access the Vue.js website using the URL http://your-server-ip:8080. You should see the Vue.js sample test page on the following screen.
Conclusion
In this guide, we explained how to install Vue.js and create a simple website using Vue CLI. You can now use Vue.js. You can now explore the VUe.js features and start building a fast and user-friendly website quickly. Try to install Vue.js on VPS hosting from Atlantic.Net!
