간단한 토이 프로젝트를 진행하다가
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 도구를 사용하여 어렵지 않게 구성할 수 있었다.
프로토타이핑을 위한 구성이니 혹시라도 실무 프로젝트를 위해 구성할 경우 서버에서 빌드나 배포를 위한 설정은 몇가지 더 추가해야 할 것 같다.
구성 할 수 있는 여러 템플릿 종류가 있는 만큼 도구를 통해 프로젝트 성격에 맞게 프로젝트를 구성하여 빠른 시작을 해 볼 수 있을 것 같다.