VueJs Project Architecture

.
├─ README.md
├─ index.html
├─ webpack.config.js
├─ package.json
└─ src
   ├─ main.js
   ├─ App.vue
   ├─ components        컴포넌트
   │  ├─ common
   │  └─ ...
   ├─ routes            라우터
   │  ├─ index.js
   │  └─ routes.js
   ├─ views             라우터 페이지
   │  ├─ MainView.vue
   │  └─ ...
   ├─ store             상태 관리
   │  ├─ auth
   │  ├─ index.js
   │  └─ ...
   ├─ api               api 함수
   │  ├─ index.js
   │  ├─ users.js
   │  └─ ...
   ├─ utils             필터 등의 유틸리티 함수
   │  ├─ filters.js
   │  ├─ bus.js
   │  └─ ...
   ├─ mixins            믹스인
   │  ├─ index.js
   │  └─ ...
   ├─ plugins           플러그인
   │  ├─ ChartPlugin.js
   │  └─ ...
   ├─ translations      다국어
   │  ├─ index.js
   │  ├─ en.json
   │  └─ ...
   ├─ images            이미지
   ├─ fonts             폰트
   └─ assets            기타 자원

• README(default) : 프로젝트에 대한 설명, 프로젝트 세팅방법, 프로젝트 구동 방법 등이 명시되어있다.
• index.html(default) : SPA(Single Page Application)에서 보여지는 웹페이지가 반영되는 곳이다.
• webpack.config.js(default) : webpack
• package.json(default) : 프로젝트 실행 script, 프로젝트 세팅시 설치되는 package들이 명시되어있다.
• src
  • main.js(default) :  vue 인스턴스를 새로 만들고 시작하는 부분으로, 전역으로 처리해야 할 일이 있으면 여기서 처리한다.
  • App.vue(default) : 최상위 Vue 파일
  • components : page의 요소가 될 UI들을 모아놓는다. components의 종류에따라 (ex. chart, dialog, ...) 폴더로 묶어 관리한다.
  • routes : page 이동을 관리한다. 보통 index.js에서 관리하며, 
  • view : App.vue에 반영될 사용자가 웹페이지에서 보게되는 page의 단위
  • store : VueJS 상태관리 역할을 하는 파일들을 모아놓는 폴더. module로 쪼개 관리한다.
  • api : api들을 모아놓은 폴더. api 기능별로 파일로 묶어 관리한다
  • utils(optional) : 여러 component에서 재사용되는 함수(ex. regex value testing),상수(ex. role),필터를 모아놓은 폴더.
  • mixins : 여러 component에서 재사용되는 기능들(ex.created,mounted,data,methods...)을 모아놓은 폴더.
  • plugins : Vue에 전역수준으로 추가하기 원하는 기능(ex. vuex,chartJS...)들을 모아놓은 폴더.
  • translation(optional) : 다국어를 지원. vue i18n이라는 플러그인(자동번역 아님)에 통합하여 주로 사용한다. 
  • images(optional) : page에서 사용하는 이미지들을 모아놓는 폴더
  • fonts(optional) : 폰트들을 모아놓는 폴더
  • assets(default) :  css 또는 favicon.ico 같은 image나 font를 제외한 자원들을 모아놓는 폴더