Vue 3 Essentials
Introduction to Vue 3
What is Vue?
Vue is a JavaScript framework for building user interfaces. Think of it like a set of powerful, pre-made tools that help you create interactive websites and applications much faster than you could with plain JavaScript.
At its core, Vue is progressive. This means you can use it to control a small part of an existing page, or you can use it to build a massive, complex single-page application (SPA). It scales with your needs.
Vue.js is an open-source JavaScript framework primarily used for building user interfaces and single-page applications (SPAs).
Vue uses a component-based architecture. Imagine building a website with LEGO blocks. Each block is a self-contained piece, like a navigation bar, a user profile card, or a button. In Vue, these blocks are called components. You build small, reusable components and then assemble them to create your entire application. This keeps your code organized and easy to manage.
It also features declarative rendering. Instead of manually telling the browser how to update the page step-by-step, you just declare what the page should look like based on your application's data. When the data changes, Vue automatically and efficiently updates the display to match. It does this using a clever technique called the Virtual DOM, which is a lightweight copy of the actual webpage structure. Vue figures out the most efficient way to update the real page by first making changes to this virtual copy.
Setting Up Your Environment
The easiest way to start a new Vue project is with the Vue CLI (Command-Line Interface). It's a tool that scaffolds a new project for you, setting up all the necessary files and configurations so you can start coding right away.
First, you'll need to have Node.js installed on your computer, as the CLI is distributed through npm (Node Package Manager). With Node.js installed, you can install the Vue CLI by running the following command in your terminal:
# This command installs the Vue CLI globally on your system
npm install -g @vue/cli
Once the installation is complete, you can create a new Vue application. Navigate in your terminal to the directory where you want to create your project and run this command:
vue create my-first-app
The CLI will ask you to pick a preset. You can choose the default for Vue 3, or manually select features. For now, the default is perfect. The CLI will then download the necessary files and set up your project.
Your First Vue App
After the project is created, navigate into the new directory and start the development server.
# Change directory into your new project
cd my-first-app
# Run the development server
npm run serve
Your terminal will show you a local address, usually http://localhost:8080. Open this in your web browser, and you'll see your brand new Vue application running.
Let's look at the files the CLI created. The most important ones are inside the src folder.
| Directory / File | Purpose |
|---|---|
main.js | The entry point of your application. This is where Vue is initialized. |
App.vue | The main, top-level component that holds all other components. |
components/ | A folder where you'll store your reusable UI components. |
assets/ | A place for static assets like images and logos. |
Vue's single-file components (SFCs) are files that end in .vue. They are the heart of a Vue application and contain three parts:
<template>
<!-- HTML for the component goes here -->
<h1>{{ message }}</h1>
</template>
<script>
// JavaScript logic goes here
export default {
data() {
return {
message: 'Hello, Vue!'
}
}
}
</script>
<style scoped>
/* CSS styles for this component only */
h1 {
color: #42b983;
}
</style>
The
<template>section contains the component's HTML structure. The<script>section holds its logic. And the<style scoped>section contains CSS that only applies to this specific component, preventing styles from leaking out and affecting other parts of your app.
Now you're ready to start building. You can edit the App.vue file, and the development server will automatically reload the page in your browser with your changes.
What is the core architectural principle Vue.js uses to encourage organized and reusable code?
What does it mean for Vue to be a 'progressive framework'?
That's the basic setup. You've created a project and know your way around the essential files. Next, you'll learn how to build out your own components.