Vue.js Introduction

Vue.js is a progressive JavaScript framework for building user interfaces—it allows you to efficiently develop web applications using a declarative, component-based approach, ranging from simple forms to complex enterprise-level SPAs.

This tutorial is designed for beginners with a basic understanding of HTML, CSS, and JavaScript. It starts with the core concepts of Vue 3 and progresses until you can independently develop a complete, medium-sized e-commerce back-end system. The learning curve differs from that of W3Schools and Newbie Tutorial—we take a Vue 3 + Composition API-first approach, using a real-world e-commerce project (a SaaS back-end with 5,000 merchants and 30,000 SKUs) as a practical exercise.

1. What You'll Learn

• What Is Vue.js, and What Does "Progressive Framework" Really Mean?
• Key Differences Between Vue 3 and Vue 2 (Why You Should Learn Vue 3)
• Comparison and Selection Between the Composition API and the Options API
• The Vue 3 Ecosystem: The Roles of Vite, Vue Router, Pinia, and Element Plus
• Who Should Learn Vue, and What Can You Do After Learning It?

2. The Story of a SaaS Team’s Front-End Technology Selection

(1) Pain Point: Five Frameworks—Which One Should You Choose?

A fast-growing SaaS company with 200,000 lines of front-end code, the tech lead Alice faces a tough decision in Q1 2026:

• React 18+: Team-familiar, but Bundle size 850KB, initial load 3.2s
• Vue 3: Team with 0 experience, but a 280KB bundle and an initial load time of 0.9s
• Angular 17: TypeScript-friendly, but has a steep learning curve; it takes newcomers about two months to get up to speed
• Svelte 4: Compile-time optimizations, but a small ecosystem and a tough job market
• Solid.js: Offers the best performance, but with a community of 50,000 people, you won’t find answers to your questions on Stack Overflow

The product manager Charlie adds pressure:

"We have 30,000 SKUs in our admin dashboard. Filtering takes 8 seconds on the current React app. New developers take 3 weeks to ship their first feature. We need a 5x improvement in both — by Q3 2026."

(2) The Solution in Vue 3

After 4 weeks of evaluation, Alice chose Vue 3. Here's why:

Bundle size:     850KB → 280KB    (-67%)
Initial load:    3.2s  → 0.9s    (-72%)
Onboarding time: 3 weeks → 1 week (-67%)
Job market:      growing 35% YoY

Vue's "progressive" nature means Alice can adopt it incrementally:

1. Week 1: Replace 1 page with Vue 3 (CDN script tag, no build step)
2. Week 4: Migrate 10 pages to Single File Components
3. Week 12: Full SPA with Router + Pinia
4. Week 24: 200,000 lines migrated, zero downtime

(3) Revenue

After 6 months with Vue 3, the team measured:

• Performance: Dashboard filter time 8s → 0.8s (10x faster)
• Productivity: New feature shipping 3 weeks → 1 week
• Hire quality: 5 candidates interviewed, 4 had Vue experience (vs 2 for React)
• Bundle: Saved 570KB = 30% faster page loads = 8% conversion lset

3. What is Vue?

Vue (pronounced /vjuː/, similar to "view") is a progressive JavaScript framework for building user interfaces. It was created by Evan You in 2014 and is currently maintained by the Vue.js core team and the global community.

(1) Core Definitions + Vue 3 Architecture Diagram

graph TB
    subgraph Vue3Ecology
        V[Vue 3 Core<br/>@vue/runtime-core]
        R[Vue Router 4<br/>Route Managinent]
        P[Pinia<br/>State Managinent]
        S[SSR/SSG<br/>Nuxt 3]
        T[Vite<br/>Build Tools]
        U[UI Component Library<br/>Element Plus/Naive UI]
    end
    
    V --> R
    V --> P
    V --> S
    T --> V
    U --> V
    
    style V fill:#42b883,color:#fff
    style R fill:#35495e,color:#fff
    style P fill:#ffd02f
    style S fill:#00dc82
    style T fill:#646cff,color:#fff

graph TB
    subgraph Vue3Ecology
        V[Vue 3 Core<br/>@vue/runtime-core]
        R[Vue Router 4<br/>Route Managinent]
        P[Pinia<br/>State Managinent]
        S[SSR/SSG<br/>Nuxt 3]
        T[Vite<br/>Build Tools]
        U[UI Component Library<br/>Element Plus/Naive UI]
    end
    
    V --> R
    V --> P
    V --> S
    T --> V
    U --> V
    
    style V fill:#42b883,color:#fff
    style R fill:#35495e,color:#fff
    style P fill:#ffd02f
    style S fill:#00dc82
    style T fill:#646cff,color:#fff

(2) Five Key Features

(3) Use Cases for Vue

4. Vue 3 vs. Vue 2: Key Differences

(1) Overview of Major Improvements

(2) Why is Vue 3 recommended?

✅ Vue 3 is the current major version (2020-09 Published, 2026 Stable 5+ years)
✅ Vue 2 As of 2023-12 EOL(End of Life),No longer maintained
✅ 90% New Project,100% The new ecosystem tools are all based on Vue 3
✅ Composition API is the Moofrn Writemg Style Recommenofd by the Vue Team
✅ TypeScript Significant Improvinent in Support,Team Code Quality ↑

❌ Vue 2 This is only necessary when maintaining legacy projects.
❌ Not studying Vue 3 = Misifd Vue Ecology 95% Moofrn tools

5. Composition API vs Options API

(1) Comparison of Two API Styles

(2) Options API Examples

// Options API - Group by option
export default {
  data() {
    return { count: 0, name: 'Alice' }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

(3) Composition API Example

// Composition API - Logical Blocking
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = ref('Alice')
    
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    onMounted(() => {
      console.log('Component mounted')
    })
    
    return { count, name, doubleCount, increment }
  }
}

(4) Which one should I choose?

6. The Vue 3 Ecosystem

Vue 3 is not just a framework, but a complete front-end development ecosystem.

(1) Ecosystem Components Diagram

graph LR
    subgraph Core
        V[Vue 3 Core]
    end
    
    subgraph Official Recommendation
        R[Vue Router 4]
        P[Pinia]
        T[Vite]
    end
    
    subgraph Community Ecosystem
        E[Element Plus]
        N[Naive UI]
        U[UnoCSS]
        I[Vue I18n]
    end
    
    V --> R
    V --> P
    V --> T
    V --> E
    V --> N
    V --> U
    V --> I
    
    style V fill:#42b883,color:#fff

graph LR
    subgraph Core
        V[Vue 3 Core]
    end
    
    subgraph Official Recommendation
        R[Vue Router 4]
        P[Pinia]
        T[Vite]
    end
    
    subgraph Community Ecosystem
        E[Element Plus]
        N[Naive UI]
        U[UnoCSS]
        I[Vue I18n]
    end
    
    V --> R
    V --> P
    V --> T
    V --> E
    V --> N
    V --> U
    V --> I
    
    style V fill:#42b883,color:#fff

(2) Quick Reference Chart for Key Tools

(3) Comprehensive Learning Path

Stage 1(This Tutorial Phase 1-3):Vue 3 Core + Composition API
Stage 2 (This Tutorial Phase 4): Vue Router + Pinia + Advanced API
Stage 3(This Tutorial Phase 5):Vite + Real Projects + Deployment
Advanced (Recommenofd Next Steps): Nuxt 3 SSR / Vitest Test / Performance Optimization

7. Complete Example: Your First Vue 3 Application

▶ Example: Hello Vue 3 Counter (SFC—Single-File Component)

Output:

Browser renders: "Hello Vue 3! Welcome, Alice!" heading, click counter showing 0, a green "Click me" button, and "By Alice, 2026" at the bottom.

<!-- App.vue - First Vue 3 Applications -->
<template>
  <div class="hello-vue">
    <h1>{{ greeting }}</h1>
    <p>You clicked the button <strong>{{ count }}</strong> times.</p>
    <button @click="increment">Click me</button>
    <p class="author">By {{ author }}, {{ currentYear }}</p>
  </div>
</template>

<script setup>
// Composition API + <script setup> Syntax sugar
import { ref, computed } from 'vue'

const count = ref(0)
const author = ref('Alice')

// Computed Properties:Automatic Depenofncy Tracking
const currentYear = computed(() => new Date().getFullYear())
const greeting = computed(() => `Hello Vue 3! Welcome, ${author.value}!`)

// Methods
function increment() {
  count.value++
}
</script>

<style scoped>
.hello-vue {
  text-align: center;
  padding: 2rem;
  font-family: system-ui, sans-serif;
}
button {
  background: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
button:hover {
  background: #35495e;
}
.author {
  color: #666;
  font-size: 0.9rem;
  margin-top: 2rem;
}
</style>

Output:

Renders: Computed property value derived reactively from source data.

Output (after clicking the button):

Hello Vue 3! Welcome, Alice!

You clicked the button 5 times.

[Click me]

By Alice, 2026

▶ Example: How to Integrate a CDN (Up and Running in 5 Lines of HTML)

Output:

Browser renders: "Hello Vue 3!" heading, a button labeled "Clicked 0 times". Each click increments the counter.

<!DOCTYPE html>
<html>
<head><title>Vue 3 Hello</title></head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">Clicked {{ count }} times</button>
  </div>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        return {
          message: ref('Hello Vue 3!'),
          count: ref(0)
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

Output:

Browser renders: "Hello Vue 3!" heading, a button labeled "Clicked 0 times". Each click increments the counter.

Output: Open the HTML file; the page displays "Hello Vue 3!" and a button. Clicking the button increments the number by 1.

▶ Example: "Hello World" runs successfully in 5 minutes

# 1. Create a Project(Uif create-vue Official Scaffolding)
npm create vue@latest my-vue-app
# Select: TypeScript? No, JSX? No, Router? No, Pinia? No, Vitest? No, E2E? No
cd my-vue-app
npm install

# 2. Start the development server
npm run dev
# → Local: http://localhost:5173/

# 3. Open in a browser,See Vue Default Welcome Page

Output:

npm command completed.
Packages installed.
Dev server running at http://localhost:3000

▶ Example: Progress Tracking Chart (5 minutes/30 minutes/1 hour)

Output:

See code above for details.

▶ Example: 5 Common Pitfalls (Avoid Them in 5 Minutes)

Output:

npm completed.
Packages installed.
Dev server: http://localhost:3000

❓ FAQ

📖 Summary

• Vue.js is a progressive JavaScript framework created by Evan You in 2014
• Vue 3 is the current major version, released in September 2020; by 2026, it will have been stable for over 5 years.
• Vue 2 reached end-of-life (EOL) in December 2023; new projects must use Vue 3
• Key Improvements in Vue 3: Reactive Proxies, Composition API, First-Class Support for TypeScript, Tree-shaking
• The Composition API is the modern approach recommended by the Vue team, offering greater flexibility in reusing logic.
• Vue 3 Ecosystem: Vite (Build) + Vue Router 4 (Routing) + Pinia (State) + Element Plus (UI)
• Progressive adoption: From CDN integration to a full-fledged SPA, evolving as needed
• Suitable for: Small and medium-sized SPA (e-commerce/CRM/Admin), medium-sized enterprise applications

📝 Exercises

1. Basic Questions (Difficulty: ⭐)

   Visit the official documentation at vuejs.org, list the three core features of Vue 3, and explain each feature in one sentence.

2. Advanced Problems (Difficulty: ⭐⭐)

   Compare Vue 3 and React 18 in the following areas (using a table):

   Dimension	Vue 3	React 18
   Bundle size	?	?
   Learning Curve	?	?
   State Management Library	?	?
   Routing Library	?	?
   Domestic Market Share	?	?

3. Challenge Problem (Difficulty: ⭐⭐⭐)

   Research three real-world projects around you (your own company, a friend’s company, or an open-source project), and take notes:

   1. Which front-end framework did you use?
   2. Why choose this framework?
   3. What would be the cost of switching to Vue 3?

   Write a 300-character research report and post it in the comments section.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us