Environment Setup

Begin by installing Visual Studio Code (VS Code). The installation process is straightforward—follow any standard guide if needed.

After installation, enhance your development experience with these essential extensions:

• Chinese Language Pack: For non-native English speakers, install the official Chinese (Simplified) Language Pack from the Extensions Marketplace by searching for "chinese".
• Vetur or Volar: Install a Vue-specific extension for syntax highlighting, IntelliSense, and debugging support.
• Live Server: Enables real-time browser preview with auto-refresh on file changes.

Running Your First Vue Application

Create a new HTML file (e.g., index.html) in VS Code. Type ! and press Enter to genertae a basic HTML5 boilerplate.

To use Vue via CDN, include the following script in the <head> section:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Alternatively, download the Vue runtime from the URL above and save it as vue.local.js in your project directory. Then reference it locally:

<script src="./vue.local.js"></script>

Here’s a minimal working example using the Composition API:

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Vue Quick Start</title>
  <script src="./vue.local.js"></script>
</head>
<body>
  <div id="root">{{ greeting }}</div>

  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        const greeting = ref('Hello Vue!');
        return { greeting };
      }
    }).mount('#root');
  </script>
</body>
</html>

Open this file with Live Server. Editing the string inside ref() and refreshing the browser will immediately reflect changes.

Core Concepts

Event Handling

Use the v-on directive (shorthand: @) to listen to DOM events:

<button @click="handleClick">Click me</button>

Two-Way Data Binding

The v-model directive synchronizes form input values with component state:

<input v-model="userInput" />

Common Pitfalls

• Incorrect Script Source: Ensure the local Vue file path matches your project structure when not using CDN.
• String Literals: Always wrap string values in quotes (e.g., ref('text'), not ref(text)).
• Character Encoding: Use English punctuation—Chinese symbols (e.g., "" instead of "") will cause syntax errors.
• Mounting Target: The root element (e.g., #root) must exist in the DOM before calling .mount().