[Vue] Vue.js 프로젝트 구조

2019. 3. 16. 13:42Web/Vue.js

Vue.js 프로젝트 구조

프로젝트 구조 셋팅에 앞서..


1. vue 설치

이전 포스팅에서 vue 개발환경 셋팅 중 가장 중요한 vue 설치를 빼먹었었네요 ^^;
그래서 우선, vue 설치부터 하고 가겠습니다~~!
vue를 쉽게 설치하는 방법은 크게 두 가지가 있습니다.

<script>태그를 이용하는 CDN 방법과 이전에 NPM을 설치했으니 NPM을 이용하는 방법입니다.

1.1 CDN

이미 진행 중인 프로젝트에 vue를 적용해야 하거나, 간단하게 vue를 체험(?)하고 싶으신 분들이 이용할 수 있는 방법인데요. vue를 사용하고자 하는 html 파일에서 와 사이에 아래와 같이 추가해 줍니다

<head>
    <script src="https://unpkg.com/vue"></script> //CDN
    ... 

1.2 NPM

다음으로는 우리와 같이 프로젝트 시작하기 전에 vue를 적용하여 폴더셋팅을 하기 위한 사람들을 위한 방법입니다. 또한 대규모 서비스를 만들 때 NPM을 이용하시는 것을 추천드립니다. NPM을 아시는 분들이라면 아마도 쉽게 하실 수 있을 겁니다.
CMD 창을 열어주시고, 아래와 같이 명령어 한 줄이면 OK!

# 최신 안정화 버전
$ npm install vue

① "Window Key + R"

② npm install vue 입력

기다리시면 설치가 완료 될겁니다^^

2. vue-cli란?

Vue.js 에서는 빠른 Vue.js 프로젝트 생성을 지원하기 위한 공식 Vue CLI(Command Line Interface)를 지원하는데, 이것을 vue-cli라고 합니다.

2.1 vue-cli 설치

vue-cli를 사용하기 위해서는 설치해줘야겠죠?

# vue-cli 설치
npm install -g vue-cli

or

npm install -global vue-cli

2.2 vue-cli와 webpack 템플릿을 사용한 프로젝트 생성하기

# "webpack" 템플릿을 이용해서 프로젝트 생성
vue init webpack new-project

webpack이란?

  • 자바스크립트 코드가 많아지면 하나의 파일로 관리하는데 한계가 있고, 여러 개의 파일을 브라우저에서 로딩한다면 많은 네트웍 비용이 발생합니다. 그래서 webpack은 이런 여러 파일들을 묶어주는(bundle) 역할을 합니다.

webpack의 개념은 이정도만 알아두시면 될 것 같습니다.

vue-cli 템플릿은 아래와 같이 "vue list" 명령어를 통해 확인하실 수 있습니다. 그 중에 위에서 사용한 템플릿은 webpack이라는 템플릿이었습니다.

프로젝트 구조 셋팅


1. vue-cli를 이용하여 생성한 프로젝트 구조

# "webpack" 템플릿을 이용해서 프로젝트 생성
vue init webpack new-project

① 프로젝트 설정 관련해서 여러가지 옵션을 선택하라는 게 나올 겁니다. 여기서는 그냥 Enter만 계속 눌러서 진행하였습니다.

읽어보시면 아시는 것도 있으실텐데, 대충 의미하는 바는 아래와 같습니다.

  • project name : 프로젝트 이름
  • project description : 프로젝트 설명
  • Author : 만든 사람
  • Vue build : Runtime+compiler 와 Runtime-only를 선택할 수 있지만, runtime+compiler를 선택하였습니다.
  • ESLint : 일종의 문법이나 Coding convention을 검사해주는 도구
  • 그 외 각종 테스트 도구들...

② 설정이 끝나면 설치가 진행됩니다.

③ 설치가 완료되면 아래와 같이 실행할 수 있는 명령어가 함께 안내될 것입니다.

④ 폴더구조
생성된 폴더 구조는 아래와 같습니다.

  • build/ : webpack 빌드 관련 설정이 모여 있는 디렉토리입니다.
  • config/ : 프로젝트에서 사용되는 설정이 모여 있는 디렉토리입니다.
    • dev.env.js : npm start 시 적용되는 설정입니다.
    • prod.env.js : npm run build 로 배포 버전에 적용되는 설정입니다.
  • dist/ : 배포버전의 Vue 어플리케이션 파일들이 모여 있는 디렉토리입니다. npm run build 명령어 실행시 생성됩니다.
  • node_modules/ : npm으로 설치되는 서드파트 라이브러리들이 모여 있는 디렉토리입니다.
  • src/ : 실제 대부분의 코딩이 이루어지는 디렉토리입니다.
    • assets/ : 이미지 등.. 어플리케이션에서 사용되는 파일들이 모여 있는 디렉토리입니다.
    • components/ : Vue 컴포넌트들이 모여 있는 디렉토리입니다.
    • router/ : vue-router 설정을 하는 디렉토리입니다.
    • App.vue : 가장 최상위 컴포넌트입니다.
    • main.js : 가장 먼저 실행되는 javascript 파일입니다. Vue 인스턴스를 생성하는 역활을 합니다.
  • index.html : 어플리케이션의 뼈대가 되는 html 파일입니다.

간단하게 여기서는 webpack template에 대해서만 다뤄봤습니다. webpack template 구조는 이렇다는 것만 알고 넘어가시면 될 것 같습니다.

2. 실무에서 많이 사용하는 폴더 구조

이 부분은 캡틴판교 님의 블로그에서 봤던 내용을 다뤄보려고 합니다.
실무에서 개발할 때 필수로 사용되는 라우터, 상태 관리, 필터, 다국어, 플러그인 등을 이용하면 아래와 같이 폴더를 구분할 수 있다고 합니다.

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

3. 본인이 생각하는 적절한 프로젝트 구조

사실, 어떤 것이 정석이다, 이것대로 해야한다라고 정해진 것은 없지만,
제가 여러 곳에서 찾아본 것 중에서 프로젝트에도 실제 쓴 것이기도 하고, 적절하다고 생각하는 프로젝트 구조는 아래와 같습니다.

.
├─ README.md
├─ index.html
├─ webpack.config.js
├─ package.json
└─ 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 
    |   |   ├── components
    |   |   └── Login.vue
    |   ├── Products 
    |   |   ├── components
    |   |   └── Products.vue
    |   ├── components
    |   ├── Home.vue 
    |   └── NotFound.vue 
    ├── vuex 
    |   ├── modules 
    |   └── store.js 
    └── main.js

여러 프로젝트 구조에 대해서 다뤄봤습니다.
여러분들이 괜찮다고 생각하시는 프로젝트 구조를 선택하셔서 진행하시면 좋을 것 같습니다.
여기까지 포스팅을 마치겠습니다~^^

'Web > Vue.js' 카테고리의 다른 글

[Vue.js] Vue의 Router(라우터)  (0) 2019.03.21
[Vue] Vue.js 개발 환경 셋팅  (0) 2019.03.04
[Vue] Vue.js란 무엇인가?  (0) 2019.03.04