요즘 Vue.js 학습의 필요성을 느꼈다. 이번 기회에 인프런 강의를 통해 Vue.js를 체계적으로 공부하며 배운 내용을 정리해보려 한다. 기록을 통해 학습 내용을 정리하고, 이후에 다시 참고할 수 있는 자료로 남기고자 한다.
프로젝트 설정
1. 사전준비
Vue.js 를 실행시키기 위해선 Node.js 프레임워크를 설치해야한다.
https://nodejs.org/ko
2. Vue cli 설치
명령줄 인터페이스인 Vue cli 최신 버전 글로벌로 설치한다.
npm install -g @vue/cli정상적으로 설치가 됐으면 cmd에서 vue -V 로 확인한다.
3.프로젝트 생성
vue create {프로젝트명}원하는 위치로 이동하여 해당 명령어를 실행하면 프로젝트 폴더가 생성된다. 이후 Vue 버전을 선택할 수 있는데 본인은 3버전을 선택하였다.
폴더 구조
//package.json
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},- package.json은 프로젝트의 설정과 의존성을 관리하는 파일이다.
- "dependencies": 애플리케이션 실행 시 필요한 패키지들
- "devDependencies": 개발 환경에서만 필요한 패키지들
my-vue-app
├── public
│ └── index.html # 가장 먼저 로드되는 파일
├── src
│ ├── main.js # Vue 애플리케이션 진입 파일
│ ├── App.vue # 최상위 컴포넌트
│ └── components # 기타 컴포넌트들
└── package.json- Vue.js 애플리케이션은 SPA(단일 페이지 애플리케이션)로 작동한다.
- 서버에 접속하면 가장 먼저 index.html 파일이 브라우저에 전달되고, 이후에 Vue.js가 동적으로 화면을 구성한다..
- 개발 서버(vite, webpack 등)가 기본적으로 이 파일을 루트 엔트리 포인트로 설정한다.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Vue App</title>
</head>
<body>
<div id="app"></div> <!-- Vue가 마운트되는 위치 -->
<script type="module" src="/src/main.js"></script>
</body>
</html>
- #app이라는 div 요소는 Vue 인스턴스가 마운트되는 위치이다.
- Vue의 main.js 파일에서 이 요소에 애플리케이션을 붙인다.
//main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
- Vue 컴포넌트들을 mount 시킨다(여기선 #app)
'Web > vue.js' 카테고리의 다른 글
| 프로젝트로 배우는 Vue.js 3_emit & props & computed (0) | 2025.03.16 |
|---|---|
| 프로젝트로 배우는 Vue.js 3_To-do List (1) (0) | 2025.03.12 |
| 프로젝트로 배우는 Vue.js 3_Vue 문법 (1) | 2025.03.11 |