Vue 디렉터리 구조

구조

project
├─ .eslintrc.js # eslint 설정 파일
├─ .gitignore # 깃에서 특정 파일 혹은 디렉토리를 관리 대상에서 제외할 때 사용하는 파일
├─ .prettierrc # prettier 설정 파일
├─ babel.config.js # babel 파일
├─ package-lock.json # 파일이 생성되는 시점의 의존성 트리에 대한 정보(안정성)
├─ package.json # 프로젝트 정보와 의존성(dependencies) 관리 문서
├─ public #제일 처음 로드되는 기본 html - div id="app"을 통해 뷰가 호출
├─ src
│  ├─ App.vue # 최상위 컴포넌트
│  ├─ assets #기타 부수적인 내용의 파일 및 폴더를 넣어놓는 디렉토리
│  ├─ components # views에서 보여주는 컴포넌트 외 컴포넌트
│  │  └─ HelloWorld.vue
│  ├─ main.ts # 애플리케이션의 진입접 - App.vue 파일을 로드하는 구조로 구성
│  ├─ plugins # 플러그인 관리 디렉토리
│  │  ├─ vuetify.ts
│  │  └─ webfontloader.ts
│  ├─ router # vue-router와 관련된 모든 파일을 저장하는 디렉토리
│  │  └─ index.ts
│  ├─ shims-vue.d.ts
│  ├─ store # 스토어 디렉토리
│  │  └─ index.ts
│  ├─ types # 타입 인터페이스 디렉토리
│  │  └─ index.d.ts # 타입 정의(declear) 파일 
│  └─ views # router에서 보여주는 디렉토리
├─ tsconfig.json # typescript 설정 파일
└─ vue.config.js # vue 설정 파일

views와 components

• 둘다 aaa.vue의 포맷. vue component파일
• views : router에서 보여주는 component파일 (라우터에 의해서 보여지는 컴포넌트)
• components : 그 외 component를 담아놓는 곳

💡 위 구분은 vue-cli가 제시하는 예시 - 능동적으로 변경 가능