프로젝트 구조 짜기

vue cli 기본 구조

.
├─ README.md
├─ index.html
├─ webpack.config.js
├─ package.json
└─ src
   ├─ main.js
   ├─ App.vue
   └─ assets
      └─ logo.png

위와 같이 기본적인 구조로 작성되어 있다.

구글링 기본 구조

.
├─ 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            기타 자원

특징은 아래와 같다.

• 라우터를 분리해서 URL 스플릿을 실현
• 컴포넌트별로 분리해서 중복 사용되는 .vue 파일을 모아놓음
• views를 Layout 별로 분리한게 아니라 router에 따라 분리
• flux 패턴 적용을 위한 vuex사용, store 디렉토리로 저장
• api 함수 분리
• utils 디렉토리로 필터나 중복으로 사용되는 모듈 저장
• .vue 에서 중복으로 사용되는 초기화 작업을 위한 믹스인 디렉터리
• vuetify 등 외부에서 사용되는 유틸리티 적욜을 위한 플러그인 디렉터리

Boilerplate를 분해

Github에서 VUE, BOILERPLATE 라는 두가지 키워드로 검색해서 Star 수가 2K 이상인 repository를 검색해보자. 이러한 아이디어를 제공해준 우아한 형제들 개발자들과 기술블로그 포스팅을 해준 개발자에게 이 자리를 빌어 감사의 말씀을 드린다.

case 1 vue-enterprise-boilerplate

Link github 접속

위에서 소개한 구글 아키텍쳐와 굉장히 유사하다. 특이사항이라고 하면 아래와 같다.

• views/ 와 layout/ 이 router/ 하위에 존재한다
  * 둘다 라우터에 따라서 적용된다고 위에서 언급한 바와 같이 직접적인 연관성이 있기에 적용한듯
  
• layout/* 이 별도로 존재, 이는 위로 길어지고, 스크롤이 길어진 웹 페이지에서 도움이 될것으로 보인다. 구체적으로 header, footer를 설정되는 경우에 아주 유용하다

case 2...(ING)