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

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

Vue.js 프로젝트 구조

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

1. vue 설치

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

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

어제보다 한 걸음 더