vuejs 프로젝트 구조 생성하기

VueJs 디렉토리 구조

src   
├── App.vue   
├── assets    
|   ├── css  
|   |   └── main.css  
|   ├── font   
|   └── img   
├── commons  
|   ├── directives   
|   ├── functions   
|   ├── resources  
|   └── validations  
├── config   
|   ├── directives.js  
|   ├── router.js  
|   └── validations.js  
├── shared-components   
|   ├── RangeCustom.vue   
|   ├── Sidebar.vue   
|   └── Toolbar.vue   
├── spa   
|   ├── Login   
|   |   └── Login.vue  
|   ├── Products   
|   |   └── Products.vue  
|   ├──  Home.vue   
|   └──  NotFound.vue   
├── vuex   
|   ├── modules   
|   └── store.js   
└── main.js  

디렉토리별 설명

• aseets : 폰트, 이미지, CSS파일, main.css(공통css)
• commons : 모든 자바스크립트 파일. directives, 앱에서 사용되는 반복해서 사용되는 모든 함수, custom validations, 앱 리소스..
• config : Vue에서 사용되는 플러그인 설정파일들.
• shared-components : 앱에서 한번 이상 사용되는 components 들
• spa : 앱 페이지들. 필요하다면 디렉토리 생성하여 더 나누어도 됨. 주의할점은 한번 이상 사용되는 컴포넌트들은 shared-components 로 이동
• vuex : vuex에 관련된 파일들

폴더 상세 분석

assets

공통적으로 사용되는 static 파일들 - 폰트, 이미지, CSS 파일

commons

모든 자바스크립트 코드들

예) commons/[하위]

• directives : 디렉티브 정의 js
• functions : 반복해서 사용하는 function
• resources : 외부 소스 호출
• validations : 밸리데이션

config

Vue에서 plugged 되어질 플러그인들, Vue에서 환경설정되어질 것들
내 앱에서 사용되어질 Vue 설정들을 파트별로 적용하는 js파일들을 모아놓음

예)

• directives.js : common/directives 폴더 밑에 등록된 것들을 Vue에 적용하는 코드
• router.js : Vue에 라우터를 적용하는 코드
• plugins.js : Vue에 사용되어질 plugin 들을 적용하는 코드

코드 예)

in directives.js

  import { 디렉티브 } from '../common/directives/[디렉티브.js]';
  
  export default (Vue) => {
    // Exemplo de como usar uma diretiva em Vue
    Vue.directive('cnpj', vCNPJ);
  };

in main.js

  import directives from './config/directives';
  
  directives(Vue); //vue의 directive 설정

shared-components

내 앱에서 재사용가능한 컴포넌트들

spa

앱 페이지들. 필요하다면 디렉토리 생성하여 더 나누어도 됨.
주의할점은 한번 이상 사용되는 컴포넌트들은 shared-components 로 이동

vuex

vuex 관련된 파일들

---

출처 : https://medium.com/tldr-tech/vue-js-2-vuex-router-yarn-basic-configuration-version-2-7b9c489d43b3