Vue.js 3 폴더구조

Vue 프로젝트를 생성하여 열면 아래의 사진처럼 폴더가 구조되어있다.

예외로 jsconfig.json 파일은 https://vuejs.github.io/vetur/guide/setup.html#project-setup 사이트를 참고하여 추가한 파일이다.

 

 

 

1. package.json

중요한 부분은 'dependencies' 와 'devDependencies' 부분인데 이 부분은 필요한 패키지의 리스트들을 저장해 놓은 공간이다. 'dependencies'는 개발을 할 때와 프로덕션에 올릴 때에 필요한 패키지이고, 'devDependencies'는 개발을 할 때에만 필요한 패키지여서 개발이 끝나면 없어도된다.

여기 있는 패키지들은 설치와 동시에 'node-modules'폴더 안에 자동으로 설치된다.

 

 

 

2. index.html

index.html은 뷰 프로젝트를 웹 브라우저에서 열었을 때 처음 받아오는 html파일이다.

<div> id가 app으로 되어있는데 여기서 뷰 어플리케이션이 전부 구동된다.

나중에 빌드를 하게되면 나중에 자바스크립트 스크립트등이 자동으로 들어가게된다.

 

 

 

3. main.js

index.html에 스크립트가 들어가게되면 제일 먼저 실행되는 파일이 main.js이다.

아래의 코드를 해석하면

vue에서 createApp 함수를 가져와서 './App.vue'를  App에 넣어준뒤 이 최상위 컴퍼넌트를 id가 app인 <div>에 넣어준다. 

 

 

 

4. App.vue

위에서 id가 app인 <div>태그에 App컴포넌트('./App.vue')를 넣어준다고 하였다.

즉 여기에 작성되는 컨텐츠들이 화면에 구현된다.

 

 

 

 

 

**위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다.

유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!