Vue.js is a progressive JavaScript framework used to build user interfaces and single-page applications. Known for its simplicity and flexibility, Vue.js has gained popularity among developers for creating dynamic and high-performance web applications. Whether you are a beginner looking to get started with frontend development or an experienced developer exploring new frameworks, Vue.js offers a robust solution for your projects.
In this guide, we will walk you through the steps to install Vue.js on a Debian 12 system. From setting up the necessary prerequisites to creating your first Vue.js application, this tutorial will provide you with the foundational knowledge to leverage the power of Vue.js in your development environment. Let’s dive in and start building interactive web applications with Vue.js on Debian 12.
To start, make sure you’ve created a VPSie account if you haven’t already. Next, proceed by deploying an Debian 12 server configured to meet your specific needs.
Once the server is deployed, SSH into the command line interface. Before installing any packages, it’s essential to update your system’s package list to ensure you have access to the latest versions. Open a terminal and run the following command:
sudo apt-get update -y
Install Node.js and Vue CLI
Before installing Vue.js, we need to ensure that our system has some essential tools and utilities. These packages help us to download, manage, and handle various tasks during the installation and development process. The following command installs three important packages:
sudo apt install curl git wget -y
Set up the NodeSource repository for Node.js on your Debian-based system. This repository provides the latest Long Term Support (LTS) version of Node.js, ensuring that you have access to the most stable and secure releases.
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
Once the repository has been added, you can install Node.js using the following command:
apt install nodejs -y
Verify the installation:
node --version
To update NPM to the latest version, use the following command:
npm install npm@latest -g
You can verify the NPM version:
npm --version
Once Node.js and npm are installed, you can install Vue CLI globally using npm.
sudo npm install -g @vue/cli
Verify the installation:
vue --version
That’s it! You now have Vue CLI installed on Debian 12.
Create a New Vue Project
Use Vue CLI to create a new Vue.js project. Navigate to the directory where you want to create the project and run:
vue create my-vue-app
You’ll be prompted to pick a preset. For a basic setup, you can choose the default preset, which includes Babel and ESLint. Use the arrow keys and Enter to select the default preset.
For most users: Select Default ([Vue 3] babel, eslint) to use the latest version of Vue and a standard setup.
Change to the newly created project directory:
cd my-vue-app
Start the Vue development server:
npm run serve
This will start a local development server and provide a URL where you can view your app, typically http://localhost:8080.
Modify the Default App
You can now modify the default Vue app. Open the src/App.vue file in a text editor and make changes. For example:
nano src/App.vue
<template>
<div id="app">
<header>
<h1>Welcome to My Vue App!</h1>
</header>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Now, When you’re ready to deploy your app, build it for production:
npm run build
This will create a dist directory containing the optimized production build of your app.
You can use a simple HTTP server to serve your production build. Install serve globally:
npm install -g serve
Then, serve your built app:
serve -s dist
Your app will be available at http://localhost:3000.
And that’s it! You’ve successfully installed Vue.js on Debian 12. Now you’re ready to start building awesome apps with Vue. If you run into any issues or have questions, don’t hesitate to reach out. Happy coding! 🚀
