Vue CLI 기본 디렉토리 구조 및 파일 설명

뭐 유별나게 Vue를 시작한다고 해서(유지보수).. 폴더 구조나 파일을 일일히 뜯어볼 필요는 없다지만 그래도 끄적여본다.

node_modules/

• npm install로 다운로드 받은 라이브러리들이 담긴 폴더

public/

• webpack에서 관리되지 않는 정적 리소스(html, css, js, img, icon 등)가 위치하는 폴더

public/index.html

• 앱의 기본 골격이 되는 html

src/

• 어플리케이션이 동작하는데 필요한 로직이 모두 담긴 폴더

src/assets/

• css, image, 멀티미디어 등의 리소스 저장 폴더

src/components/

• vue 컴포넌트 파일들이 위치하는 폴더

src/App.vue

• vue의 최상위 Root 인스턴스 파일

src/main.js

• 가장 먼저 시작되는 javascript, App.vue 파일을 로드하는 곳 (App.js 같은 곳)

babel.config.js

• ES6+ 이상 버전의 javascript 코드를 하위 버전의 javascript문법으로 변환시켜 브라우저에 호환되어 실행되도록 하는 설정이 가능한 파일

babel이란?
최신 JavaScript 문법을 구형 브라우저에서도 동작할 수 있는 호환성 있는 코드로 변환해주는 도구를 의미

즉, babel.config.js 파일은 Babel의 플러그인과 프리셋을 설정하고, 프로젝트 변환 규칙을 지정하는 역할을 수행하며, 다양한 Babel 설정을 구성할 수 있음

package.json

• 프로젝트 정보, 스크립트 실행, 의존성 관리가 담긴 json 파일

vue.config.js

• vue의 webpack 등의 설정을 위한 파일