1. Vue3를 공부해야 하는 이유
- Vue는 표준 HTML/CSS/JS 위에서 동작하는 컴포넌트 기반 프레임워크
- 현재 공식 문서와 생태계는 Vue2가 아닌 Vue3를 중심으로 움직임
- Vue2는 이미 장기 지원이 끝났고, 새로운 기능 및 라이브러리는 Vue 3를 우선 지원함
이번 글의 목표는
Vue 3 프로젝트를 만드는 표준 방법(= Vite + create-vue)을 이해하고
Vue 2와 다른 앱 초기화 방식(createApp)의 큰 그림을 잡고
생성된 프로젝트 구조가 어떤 의미인지 파악하는 것입니다.
2. Vue 3 프로젝트 생성
Vue 3 공식 문서는 로컬에서 Vue 앱을 만들 때 Vite 기반 스캐폴딩 도구인 create-vue를 사용하라고 안내합니다.
Node.js 최신 버전(18 이상 권장)과 터미널을 사전에 준비해야 합니다.
프로젝트 생성 명령어는 아래와 같습니다.
# npm 기준
npm create vue@latest
# 또는
pnpm create vue@latest
# 또는
yarn create vue@latest명령을 실행하면 프로젝트 이름, TypeScript 사용 여부,
Vue Router, Pinia, Vitest, ESLint 등 추가 기능 포함 여부를 선택하는 프롬프트가 나옵니다.
JavaScript보다 TypeScript를 선호하신다면 TypeScript를 선택하시면 되고, 아니라면 No로 시작하시면 됩니다.
Router, Pinia는 어차피 공부할 거라면 Yes를 고릅니다. (나중에 사용하지 않아도 문제 없음)
프로젝트가 만들어지면 아래 명령어를 순서대로 실행합니다.
cd 프로젝트명
npm install
npm run dev터미널에 나온 주소(http:localhost:5173)를 터미널에 입력해서 접속하면 기본 Vue 3 화면이 뜹니다.
3. Vite + Vue 3 프로젝트 구조
npm create vue@latest로 만든 프로젝트는 내부적으로 Vite 빌드 환경을 사용합니다.
구조는 아래와 같습니다.
프로젝트명
├ index.html
├ package.json
├ vite.config.[js|ts]
└ src/
├ main.[js|ts]
├ App.vue
└ components/
└ HelloWorld.vue핵심 파일만 짚어보겠습니다.
1️⃣ index.html
Vite 프로젝트에서는 public/index.html 대신 루트에 index.html이 있고, 여기서 Vue 앱이 마운트될 DOM을 제공합니다.
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body><div id="app">가 Vue 앱이 붙는 자리이고, /src/main.js에서 Vue 앱을 만들어 마운트합니다.
2️⃣ src/main.js
Vue 3에서 앱을 초기화하는 진입점입니다. 공식 예시는 아래와 같은 형태입니다.
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')- createApp(App): 루트 컴포넌트(App.vue)를 기반으로 앱 인스턴스를 생성
- .mount('#app'): index.html의 <div id="app">에 붙이기
나중에 Router, Pinia를 쓸 때는
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')처럼 app 변수에 담아 확장하는 식으로 패턴이 이어집니다.
3️⃣ App.vue와 SFC 구조
App.vue는 루트 컴포넌트입니다. 대부분의 Vue 3 프로젝트에서 SFC(Single File Component) 형식을 사용합니다.
<!-- App.vue -->
<template>
<div id="app">
<h1>Vue 3 + Vite 기본 화면</h1>
<HelloWorld msg="Vue 3 시작하기"/>
</div>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<style>
/* 전역 스타일 */
</style>
Vue 공식 문서에서는 SFC를 HTML/CSS/JS를 한 파일에 모아 컴포넌트를 정의하는 자연스러운 확장이라고 설명합니다.
4. Vue2와 Vue3 비교
// Vue 2
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')Vue 2에서는 전역 Vue 생성자를 사용하고, new Vue({...}) 인스턴스를 만들고 $mount()를 호출합니다.
반면, Vue 3 방식은 createApp() 함수로 앱 인스턴스를 생성하고, 체이닝으로 .mount()를 호출합니다.
👉 Vue3에서는 여러 개의 앱 인스턴스를 같은 페이지에 올릴 수 있고, 각 앱마다 플러그인/전역 설정을 분리해서 가질 수 있다는 장점이 있습니다.
즉, Vue3는 createApp 기반 초기화로 앱 간 격리가 쉬워졌고, 테스트/구성도 편해졌습니다.
출처
Vue 3 마이그레이션 공식 문서 - Global API Application Instance
'Framework > Vue' 카테고리의 다른 글
| Vue 3 라이프사이클 이해하기: onMounted, onUnMounted로 created/mounted 매핑하기 (0) | 2025.11.24 |
|---|---|
| Vue3 Composition API: setup, ref, reactive로 상태 관리 (0) | 2025.11.24 |
| Vue CLI로 Vue 프로젝트 만들기 (0) | 2025.11.21 |
| Vuex 모듈(modules)로 스토어 깔끔하게 나누기 (0) | 2025.11.21 |
| Vuex를 이용한 Vue 전역 상태 관리 예제 (0) | 2025.11.20 |
