Quick Start

Create a New Project

Using Vue CLI:

npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve

Using Vite (Recommended):

npm create vue@latest my-app
cd my-app
npm install
npm run dev

Project Structure

my-app/
├── node_modules/     # Dependencies
├── public/           # Static assets
├── src/              # Source code
│   ├── assets/       # Resource files
│   ├── components/   # Components
│   ├── App.vue       # Root component
│   └── main.js       # Entry file
├── index.html        # HTML template
├── package.json      # Project configuration
└── vite.config.js    # Vite configuration

Write Your First Component

src/App.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

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

const message = 'Hello, Vue!'
const count = ref(0)

const increment = () => {
  count.value++
}
</script>

<style scoped>
h1 {
  color: #42b883;
}
</style>

Start Development Server

npm run dev

Open http://localhost:5173 to view your application.