Introduction to Vue 3

Vue (pronounced like 'view') is a progressive JavaScript framwork for building user interfaces. It focuses on the view layer and enables developers to create web applications, mobile apps (via solutions like UniApp), and complex admin dashboards. Vue's core goal is to provide a simple, approachable API for reactive data binding and composable UI components.

Before diving into Vue, a foundational understanding of HTML, CSS, and JavaScript is recommended, along with basic programming and web concepts.

Setting Up the Development Environment

Installing Node.js

Vue development requires Node.js and its package manager, npm. Download and install the latest LTS version from the official Node.js website. After installation, verify it by running the following commands in your terminal:

node --version
npm --version

A successful enstallation will display the respective version numbers.

Choosing a Code Editor

While any text editor works, Visual Studio Code (VS Code) is highly recommended for its excellent Vue and JavaScript support through extensions. Alternatives like WebStorm or IntelliJ IDEA are also suitable.

Creating You're First Vue Project

Navigate to your desired workspace directory (avoid paths with spaces or special characters) and open a terminal there. Execute the following command to scaffold a new Vue project using the official project creation tool:

npm create vue@latest

This command launches an interactive setup. Follow the prompts to configure features like TypeScript, JSX, Vue Router, and Pinia for state management. Once completed, a new project folder will be generated.

Running and Building the Project

Starting the Development Server

Change into your new project's directory and install its dependencies, then start the local development server:

cd your-project-name
npm install
npm run dev

The npm install command fetches all required packages. npm run dev starts a hot-reload development server. The terminal will output a local URL (typically http://localhost:5173). Open this in your browser to see the default application.

Building for Production

To create an optimized, production-ready build, run:

npm run build

This process generates a dist folder containing miinfied and bundled assets ready for deployment to a web server.

Project Structure Overview

A standard Vue 3 project created with the above tool has the following key directories and files:

• src/: The main source code directory.
  • main.js / main.ts: The application's JavaScript entry point.
  • App.vue: The root Vue component, serving as the main UI container.
  • components/: Directory for reusable Vue components.
  • assets/: Folder for static resources like images and CSS.
  • router/: Contains Vue Router configuration files for defining application routes.
• public/: Holds static files that are copied directly during build.
• package.json: Manages project metadata, dependencies, and scripts.

Core Application Files

The Entry Point: main.js

This file initializes the Vue application. It imports necessary dependencies, creates the app instance using the root component (App.vue), and mounts it to a DOM element.

// main.js
import { createApp } from 'vue';
import './assets/global.css';
import RootComponent from './App.vue';
import appRouter from './router';

const application = createApp(RootComponent);
application.use(appRouter);
application.mount('#app');

The Root Component: App.vue

App.vue is a Single-File Component (SFC) that acts as the root container for your application's UI. It typically defines the main layout, includes global styles, and hosts router views where other components are rendered.

<!-- App.vue -->
<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" />
  </header>
  <main>
    <RouterView />
  </main>
</template>

<script setup>
// Component logic goes here
</script>

<style scoped>
/* Component-specific styles */
header {
  line-height: 1.5;
}
</style>

Routing with Vue Router

The router/index.js file defines the mapping between URL paths and the components that should be displayed. It enables building single-page applications (SPAs) with client-side navigation.

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../views/HomeView.vue';

const routeDefinitions = [
  {
    path: '/',
    name: 'home',
    component: HomePage
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes: routeDefinitions
});

export default router;