[Vue] Vue 프로젝트 구조 알아보기

 

 

Vue-cli가 생성한 기본 프로젝트의 구조에 대해 알아보자

 

 

◆ Vue 프로젝트 구조

 

- Vue project 환경을 의미

- 기본 vue 개발환경을 설정해주는 도구로 기본적인 프로젝트를 세팅

 

 

 

▷ node_modules : 앱 개발과 배포에 필요한 npm 패키지 저장
▷ public : 배포 버전을 빌드할 때 필요한 파일(컴파일되지 않는 요소)
▷ src : 컴포넌트들을 구성하는 영역으로 Vue가 컴파일하는 대상
  - assets : img와 같은 자원들을 저장하는 곳으로 컴포넌트에서 사용한 파일들은 자동배포
 - components : component를 만드는 곳
▷package.json : 프로젝트에 대한 전반적인 설정

 

 

---

 

◆ package.json 파일

 

- 프로젝트의 설정을 담는 파일로  spring application의 pom.xml 역할과 비슷

 

 

 

▷ scripts는 $npm run serve 명령어로 실행 
▷ 의존성 라이브러리는 용도(프로젝트 동작/개발)에 따라 설치하여 사용
▷ eslintConfig를 통해 eslint에 대한 설정을 진행하여 문법 및 관행적인 부분을 체크

 

그 외에 궁금한 것들도 앞으로 차차 알아가보자!

 

 

<참고>

https://cli.vuejs.org/config/#vue-config-js

Configuration Reference | Vue CLI