*.vue 파일 하나만 즉시 프로토타이핑 하기 (Instant Prototyping)

 이번에 소개할 기능은 Vue CLI를 통해서 전체 프로젝트 구조를 갖추지 않고 *.vue 파일 하나, 즉 하나의 싱글 파일 컴포넌트를 브라우저를 통해서 즉시 확인할 수 있는 기능입니다. 싱글 파일 컴포넌트를 만들어서 브라우저로 빠르게 확인해보는 등의 작업에 활용할 수 있습니다.

 

vue serve, vue build 실행 환경 준비하기

---

 

vue serve, vue build는 @vue/cli-service-global 패키지가 제공하는 기능이므로 설치가 필요합니다. 

 

> npm install -g @vue/cli-service-global

 

참고로 vue serve는 전역에 설치되어 있는 디펜던시에 의존한다는 한계가 있어서 컴퓨터에 설치된 버전에 따라 다른 결과가 나올 수 있습니다. 따라서 이 기능은 빠른 프로토타이핑에만 사용하는 것을 권장합니다.

 

 

 

vue serve 사용해보기

---

vue serve 기능의 핵심을 짚어보면, vue create로 base 프로젝트를 만드는 과정이 필요없고 하나의 js 파일이나 .vue 파일만 만들어서 개발 모드로 실행해 볼 수 있다는 점입니다.

 

명령어는 두가지 방식으로 활용할 수 있습니다. entry file을 지정하지 않는 경우 명령을 실행하는 디렉토리에 App.vue 파일이 존재해야 합니다.

 

// entry file 지정 안함. App.vue 파일이 있어야 함
> vue serve

// entry file 지정
> vue serve hello.vue

 

vue serve 내부적으로 vue create를 사용한 프로젝트의 기본 설정을 똑같이 사용합니다. 따라서 entry file도 지정하지 않았을 때 main.js, index.js, App.vue, app.vue 중 하나가 있어야 오류 없이 실행되는 것이죠. 

 

 

 

vue build 사용해보기

---

빈 디렉토리에 App.vue 파일 하나만 만든 상태에서 vue build 명령어를 실행하면 다음과 같이 dist 폴더에 웹팩에 의해 번들링 된 파일들이 생성됩니다.

 

 

vue build의 결과 역시 vue create로 생성한 프로젝트의 디폴트 설정과 같은 설정값으로 진행됨을 알 수 있습니다.