Vue.js 프로젝트 구조

Vue 프로젝트 실행 구조 이해하기

vue
└─ project
   ├─ node_modules			# 설치된 node 모듈이 위치한 폴더. npm install 명령어를 통해 설치한 모듈이 위치한 곳.
   ├─ public				# index.html 파일이 위치한 곳 (정적 파일 위치)
   │  ├─ favicon.ico
   │  └─ index.html
   ├─ src					# 구현되는 vue 컴포넌트 파일이 위치하는 곳
   │  ├─ assets				# css, image 등 파일이 위치하는 곳
   │  │  └─ logo.png
   │  ├─ components			# Vue 컴포넌트 중에 재사용을 위해서 구현된 컴포넌트가 위치하는 곳
   │  │  └─ HelloWorld.vue
   │  ├─ router				# 라우팅을 정의하는 파일이 위치하는 곳
   │  │  └─ index.js
   │  ├─ store				# vuex의 상태저장소인 store 파일이 위치하는 곳
   │  │  └─ index.js
   │  ├─ views				# 웹 애플리케이션에서 각 화면, 즉 메뉴에 대응하는 화면에 해당하는 Vue 컴포넌트가 위치하는 곳
   │  │  ├─ AboutView.vue
   │  │  └─ HomeView.vue
   │  ├─ App.vue			# 최상위 Vue 컴포넌트
   │  └─ main.js			# Vue 프로젝트를 실행시켜 public/index.html에 마운트 시켜주는 파일
   ├─ .editorconfig
   ├─ .gitignore
   ├─ babel.config.js
   ├─ jsconfig.json
   ├─ package-lock.json
   └─ package.json			# Vue 프로젝트에 대한 정보 및 사용하고 있는 모듈 등에 대한 정보를 관리. Vue 프로젝트를 실행 할 수 있는 스크립트가 정의된 파일

1. vue 프로젝트 실행

Vue CLI의 vue-cli-serive serve를 호출하여 개벌 서버를 초기화하고 개발 서버는 애플리케이션의 코드를 실시간으로 컴파일하여 변경사항을 브라우저에 자동으로 적용함

npm run serve

2. main.js 파일 실행

main.js 파일은 Vue 앱을 시작하는 곳으로, 여기서 앱 인스턴스를 생성하고. 라우터, 상태관리 시스템을 설정하여 웹 애플리케이션 준비함.

3. 컴포넌트 마운트

main.js 파일에서 createApp 함수를 사용해 Vue앱 인스턴스를 생성하고 최상위 컴포넌트인 App.vue 를 Vue 앱 인스턴스에 마운트함.

4. 라우팅 및 모듈 처리

main.js 파일에서 Vue 라우터 , Vuex(상태관리 라이브러리), 믹스인 그리고 필요한 전역 모듈들을 로드하고 , Vue 앱 인스턴스에 등록함.

// vue / project / src / main.js
//createApp 함수를 사용하여 새로운 Vue 애플리케이션 인스턴스를 생성함.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

5. 내비게이션 및 라우팅 실행

App.vue 컴포넌트 내에서 라우터 뷰 ( router - view )를 사용해 URL에 따라 적절한 컴포넌트 렌더링

이 과정에서 내비게이션(경로 변경)이 처리되며, 해당하는 라우트 설정에 맞는 컴포넌트가 화면에 표시됨

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/Login">Login</router-link>
  </nav>
  <router-view/>
</template>

6. 컴포넌트의 DOM 마운트

App.vue 컴포넌트는 public/index.html 파일 내의 <div id="app"></div> 요소에 마운트 되며 이 과정을 통해 Vue앱의 UI가 웹 페이지에 렌더링되어 사용자게에게 보여짐.