이제 vue를 vscode에 만들어보고 실행시켜보자
npm create vite@latest >> 프로젝트 생성
cd 프로젝트 명 >> 생성된 폴더로 이동
npm install >> 의존성 설치
(npm install vue-router@4) >> SPA에서 페이지 이동(라우팅)담당
npm run dev >> 개발 서버 실행순서로 실행한다.
vue create my-project는 Vue CLI 기반 프로젝트 생성이라 별도의 CLI설치가 필요하다.
하지만 최신의 Vue 3+ 기반의 개발방식에는 Vite 명령어를 실행한다.
위의 과정을 따라하면
아래와 같은 폴더 구조가 만들어진다.
my-project/
├── node_modules/ # 설치된 npm 패키지
├── public/ # 정적 파일(html, favicon 등)
│ └── vite.svg
├── src/ # 핵심 코드
│ ├── assets/ # 이미지, CSS 등의 정적 자산
│ ├── components/ # Vue 컴포넌트 파일
│ ├── App.vue # 루트 컴포넌트
│ └── main.js # Vue 인스턴스 생성 및 마운트
├── index.html
├── package.json # 프로젝트 설정 및 의존성 관리
├── vite.config.js # Vue 설정 파일
└── README.mdpakage.json
프로젝트의 설정과 의존성 목록을 담고 있는 핵심 파일이다.
- name: 프로젝트 이름
- scripts: 실행 명령어
- dependencies: 사용하는 라이브러리
- devDependencies: 개발 도구
와 같은 내용들로 구성되어있으며, 프로젝트의 환경을 설정하는 파일이라고 할 수 있다.
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.2.0"
}
}vite.config.js
vite 설정 파일이다.
기본적으로 비워져 있지만 포트 번호 변경, 플러그인 추가, 별칭 설정등을 수행할 수 있다.
index.html
Vue 앱의 기본 HTML 템플릿이다.
일반 HTML 파일처럼 보이지만, Vue가 이 안에 렌더링되어있다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>div id = "app" 이 부분이 vue가 삽입되어있다는 의미이다.
src/main.js
Vue 애플리케이션의 진입점으로 App.vue를 가져와서
브라우저의 '#app'요소에 Vue 앱을 마운트 한다.
마운트?
Vue 앱을 특정 DOM 요소에 연결하여, 그 안에서 컴포넌트 기반 UI를 그리는 것을 마운트라고 한다.
웹 브라우저는 기본적으로 HTML파일을 읽고 페이지를 렌더링 한다.
하지만 Vue는 자바스크립트를 통해 DOM을 동적으로 조작하고 그 결과를 화면에 그려준다
Vue가 화면을 그리기 시작할 위치를 지정해야 하는데 index에서 id = "app"같은 요소들로 지정해준다.
import { createApp } from 'vue' # Vue 앱을 생성
import './style.css'
import App from './App.vue'
# HTML에서 id="app"인 요소에서 이 앱을 그려넣는다
createApp(App).mount('#app') App.vue
Vue 애플리케이션의 루트 컴포넌트로 최상위 부모라고 생각하면 된다.
보통 앱 전체에 적용되는 요소들이 여기에 포함된다.
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>components/
재 사용 가능한 Vue 컴포넌트를 저장하는 폴더이다.
a.vue, b.vue, c.vue등 컴포넌트를 나눠서 관리하니
유지보수가 쉬워지는 장점이 있다.
assets/
이미지폰트, CSS등 정적 리소스를 저장하는 폴더이다.
public/
정적 파일을 넣는 디렉토리다
해당 디렉토리 안에 있는 파일은 그대로 URL 경로로 접근이 가능하다.
node_modules/
npm install을 통해 설치된 모든 라이브러리들이 저장되는 폴더이라
따라서 직접 수정하지 않는다.
마운트 = 그 렌더링 결과를 HTML의 특정 요소에 붙이는 것
렌더링 = 마운트된 요소 안에 실제 UI를 그리는 과정
