vue.js 프로젝트 구성 하기 (WebStorm 편)

간단한 토이 프로젝트를 진행하다가

Vue.js 라는 frontend 기술이 핫하다고 하여

간단하게 프로젝트 구성을 시도해 보았다.

어느 프로젝트나 그렇듯이 시작이 반이라고

프로젝트 구성이 가장 힘들고 감이 안오는 것 같다.

일단 웹을 만들기 위한 프로젝트 이기에 

무턱대고 WebStorm 을 설치 한다. 링크는 여기

설치가 끝나면 다음과 같은 화면이 뜬다.

Create New Project 를 클릭해 보자 

나는 vue 프로젝트를 구성할 거니 사이드 메뉴에서 vue.js 를 클릭한다. 

vue 프로젝트를 생성하기 위해서는 Node interpreter 와 vue-cli 가 설치되어 있어야 한다. 

설치되어 있지 않다면 해당 란이 비어 보이며, 필요한 요청 사항이 표시 될 것이다. 

Node(NPM) 설치는 home brew 를 사용 중이라면 

$ brew install node

를 통해 설치 할 수 있으며,

vue-cli 설치는 node 를 설치 후

$ npm install vue-cli -global 

명령어를 통해 설치 할 수 있다.

Project template 선택은 기본적인 기능만 사용한다면 webpack-simple 를 선택한다.

그럼 추가적인 프로젝트를 정보를 입력 후에 다음과 같이 프로젝트 구조가 생성된다.

오른쪽 하단에 Install Dependencies 팝업의 npm install 을 클릭하여 프로젝트에 필요한 plugin 들을 설치하면 

기본적인 프로젝트 구성이 끝이 난다.

<참고>

템플릿 종류	설명
webpack	고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
webpack-simple	웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
browserify	고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
browserify-simple	브라우저파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
simple	최소 뷰 기능만 들어간 HTML 파일 1개 생성
pwa	웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

(마무리) 

vue.js 프레임워크를 사용하기 위해 간단하게 프로젝트 구성을 해 보았다.

WebStorm 도구를 사용하여 어렵지 않게 구성할 수 있었다.

프로토타이핑을 위한 구성이니 혹시라도 실무 프로젝트를 위해 구성할 경우 서버에서 빌드나 배포를 위한 설정은 몇가지 더 추가해야 할 것 같다.

구성 할 수 있는 여러 템플릿 종류가 있는 만큼 도구를 통해 프로젝트 성격에 맞게 프로젝트를 구성하여 빠른 시작을 해 볼 수 있을 것 같다.