[Vue] 프로젝트 구조

Vue 프로젝트는 기본적으로 여러 폴더와 파일들로 구성됩니다. 가장 중요한 파일 중 하나는 App.vue 파일입니다.

이 파일은 Vue 애플리케이션의 시작점을 담당합니다. 아래는 Vue 프로젝트의 기본 구조입니다.🚀

---

 

1. App.vue 💻

App.vue는 Vue 애플리케이션의 최상위 컴포넌트입니다.
이 파일에서 애플리케이션의 레이아웃과 스타일을 설정하고, 다른 컴포넌트를 불러옵니다.

App.vue의 기본 구조

<template>
  <!-- HTML을 작성하는 부분입니다. -->
  <div id="app">
    <h1>Hello, Vue 3!</h1>
  </div>
</template>

<script>
  // JavaScript를 작성하는 부분입니다.
  export default {
    name: 'App',
  };
</script>

<style>
  /* 스타일을 작성하는 부분입니다. */
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    color: #2c3e50;
  }
</style>

 

• template: 이 부분은 Vue 컴포넌트의 HTML을 작성하는 곳입니다. Vue는 template 안에 작성된 HTML을 기반으로 UI를 구성합니다.
• script: 이곳은 Vue 컴포넌트의 로직을 작성하는 곳입니다. export default를 사용하여 컴포넌트의 속성, 메서드, 라이프사이클 훅 등을 정의할 수 있습니다.
• style: 이 부분은 CSS 스타일을 정의하는 곳입니다. Vue에서는 기본적으로 해당 컴포넌트에만 적용되는 스타일을 작성할 수 있습니다. 전역 스타일을 적용하려면 scoped 속성을 제거하면 됩니다.

---

 

2. 프로젝트 폴더 구조 💻

Vue 프로젝트를 생성하면 기본적으로 다음과 같은 구조를 가집니다.

src/
 ├── assets/          # 이미지, 폰트 등과 같은 정적 파일
 ├── components/      # 재사용 가능한 Vue 컴포넌트들
 ├── App.vue          # 최상위 컴포넌트
 └── main.js          # Vue 인스턴스를 생성하고 App.vue를 렌더링하는 파일

 

• src/: 프로젝트의 모든 소스 코드가 위치하는 폴더입니다. Vue 컴포넌트, 스타일, 자바스크립트 코드 등이 포함됩니다.
• assets/: 이미지, 폰트 등 애플리케이션에서 사용되는 정적 파일들이 이 폴더에 저장됩니다.
• components/: 재사용 가능한 Vue 컴포넌트들을 이 폴더에 배치합니다.
  예를 들어, 버튼, 카드 등 반복적으로 사용할 컴포넌트들을 정의할 수 있습니다.
• main.js: 애플리케이션의 진입점입니다. 이 파일에서 Vue 인스턴스를 생성하고, 최상위 컴포넌트인 App.vue를 렌더링합니다.

---

 

3. main.js 파일 💻

main.js는 Vue 애플리케이션의 진입점입니다. 이 파일에서 Vue 인스턴스를 생성하고, App.vue를 렌더링합니다.

import { createApp } from 'vue';  // Vue 3 API
import App from './App.vue';       // App.vue 컴포넌트를 불러옵니다

createApp(App).mount('#app');    // Vue 인스턴스를 '#app' 엘리먼트에 마운트합니다

---

 

이렇게 Vue 프로젝트의 기본 구조를 이해하고 있으면,

다양한 컴포넌트와 기능을 추가하며 프로젝트를 확장할 때 많은 도움이 됩니다!