Vue Quick Start

After creating your first Vue project and understanding its basic structure, let's get a feel for how Vue works by modifying code. We'll complete a classic "Hello, World!" example and understand the basic composition of a Vue single-file component.

1. Start Your Development Server

First, ensure your development server is running. In your project root directory, open a terminal and execute:

npm run dev

Then open the local address it provides in your browser (for example http://localhost:5173). You should see Vue's default welcome page.

2. Open the Root Component App.vue

Now, use your code editor (VS Code is recommended) to open the project. Find and open the src/App.vue file. This file is the root component of the application, and what you see in the browser is rendered by it.

A typical .vue single-file component (SFC) consists of three parts:

• <template>: Defines the component's HTML structure.
• <script setup>: Writes the component's JavaScript/TypeScript logic. Here you can define data, methods, etc.
• <style>: Writes the component's CSS styles.

3. Modify Template Content

Let's modify the <template> section. Replace the entire content of the src/App.vue file with the following code:

<script setup>
// This is the component's logic section
</script>

<template>
  <!-- This is the component's HTML structure -->
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  </header>

  <main>
    <h1>Hello, Vue!</h1>
    <h3>You have successfully run your first Vue application.</h3>
  </main>
</template>

<style scoped>
/* This is the component's styles */
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

main {
  text-align: center;
}
</style>

4. View Hot Reload Effect

When you save the App.vue file, you'll notice that the page in the browser automatically refreshes and displays the content you just modified: "Hello, Vue!".

This feature is called Hot Module Replacement (HMR), supported by Vite. HMR greatly improves development efficiency because it allows you to see code changes in real-time without refreshing the entire page.

5. Add Reactive Data

Now, let's add some dynamic data in <script setup>.

Modify the src/App.vue file as follows:

<script setup>
import { ref } from 'vue'

// Use ref to create a reactive variable
const message = ref('Welcome to the world of Vue!')
</script>

<template>
  <main>
    <h1>{{ message }}</h1>
    <input v-model="message" />
  </main>
</template>

<style scoped>
main {
  text-align: center;
  margin-top: 2rem;
}

input {
  margin-top: 1rem;
  padding: 8px;
  font-size: 1rem;
}
</style>

In this version:

1. We imported the ref function from vue.
2. Used ref('...') to create a reactive reference message. This means when the value of message changes, Vue will automatically update all places in the template that use it.
3. In the template, we use double curly braces to display the value of message.
4. We added an <input> element and used v-model="message" to two-way bind the input box's value with the message variable.

Now go back to the browser, and you'll see <h1> displaying "Welcome to the world of Vue!". Try typing some new text in the input box, and you'll find that the content of <h1> changes in real-time as you type.

This is the charm of Vue's declarative rendering and reactivity system! You only need to care about your data (state), and Vue will handle all the tedious DOM updates.