Set Up Vue 3 with Vite and Understand Single-File Components — Vue Basics, Part 1

Vue.js and Vite

npm create vite@latest

1. At project name:, enter a name such as my-vue-app.
2. At Select a framework:, use the arrow keys to select Vue and press Enter.
3. At Select a variant:, choose JavaScript or TypeScript. For this guide, choose JavaScript.

cd my-vue-app
npm install

npm run dev

<script setup>
// JavaScript 로직이 들어가는 부분
// 컴포넌트의 데이터, 함수 등을 정의합니다.
import { ref } from 'vue'
 
defineProps({
  msg: String,
})
 
const count = ref(0)
</script>
 
<template>
  <h1>{{ msg }}</h1>
 
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
 
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test HMR
  </p>
</template>
 
<style scoped>
/* CSS 스타일이 들어가는 부분 */
/* `scoped` 속성을 사용하면 이 스타일은 현재 컴포넌트에만 적용됩니다. */
.read-the-docs {
  color: #888;
}
</style>

• Readability
  — Keeping HTML, JavaScript, and CSS together makes it easier to understand and edit a component.
• Maintainability
  — A separate file for each component lets you organize and maintain code by feature.
• Reusability
  — Import a component wherever you need it and reuse the work you've already done.

Next time, we'll look more closely at Vue template syntax and learn how to display data and handle user input.

• Official Vue.js documentation↗
• Official Vite documentation↗