들어가기
저번 포스트에서 Vue 개발환경을 설정했다.
이번에는 Vue CLI를 이용해서 간편하게 Vue 프로젝트를 만들어보자.
Node와 Vue-Cli를 미리 설치해야 한다.
Vue CLI(Commnad Line Interface) 란?
뷰 코어팀에서 제공하는 일종의 터미널용 도구이다.
저번 글에서 node를 설치한 뒤에 아래 명령어로, Vue CLI를 설치했다.
1 | install vue-cli -global |
Vue CLI를 설치하면 터미널에서 간단한 명령어를 통해서 프로토타입 프로젝트를 쉽게 만들수 있다.
(사실 처음 CLI라는 용어에 이건 뭐지? Vue 전용 터미멀 프로그램인가? 라고 혼동이 좀 왔었다.)
Vue CLI 프로젝트 생성 명령어
템플릿 종류 | 설명 |
---|---|
vue init webpack | 고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원 |
vue init webpack-simple | 웹팩 최소 기능을 활용한 프로젝트 구성방식, 빠른 화면 프로토타이핑용 |
vue init browserify | 고급 브라우저파리 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원 |
vue init browserify-simple | 브라우저파이 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑용 |
vue init simple | 최소 뷰 기능만 들어간 HTML 파일 1개 생성 |
vue init pwa | 웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트 |
webpack, browserify 같은 모듈 번들러 프로젝트는 자체적으로 Vue 로더를 포함하고 있다.
Vue 로더는 vue.확장자 파일을 HTML, SCRIPT, STYLE로 변환해 준다.
따라서 Vue 로더가 포함돤 프로젝트를 생성하면 Vue 확장자 파일을 사용 할 수 있다.
Vue CLI 로 webpack-simple 프로젝트 생성하기.
원하는 경로에 프로젝트 폴더를 생성하고, cmd로 그 경로로 이동하여 vue init webpack-simple 명령어를 입력하자.
나는 TestVue라는 폴더를 만들었다.
index.html: 뷰로 만든 웹 앱의 시작점. npm run dev 실생시 로딩되는 엔트리 파일이다.
webpack.config.js: 웹 팩 설정파일. 웹팩 빌드를 위해 필요한 로직들을 정의 하는 파일이다.
package.json: npm 설정파일이 있다. Vue 어플리케이션에서 필요한 라이브러리 정보를 포함하고 있다.
pakcage.json을 보면 알겠지만, 초기 프로젝트 생성시 npm intall을 이용해서 라이브러리를 받아야 한다.
cmd 에서 npm install 을 입력하자.
package.json 파일 내부를 보면 아래와 같은데
1 | { |
scripts 부분을 보면 dev, build 명령어를 확인 할 수 있다.
npm run dev, npm run build 명령어가 등록되어 있다.
npm run dev를 cmd에 입력해 보면 webpack-dev-server(node 기반 웹서버) 가 자동으로 동작하며 자동으로 브라우저가 열리며(localhost:8080) 아래처럼 방금 생성한 Vue프로젝트가 열린다.(index.html)
서버가 실행되어 있는 동안 코드를 수정하면 바로바로 적용된다.
만 그대로 개발할때 사용하는 용도이다.
npm run build명령을 입력하면 dist폴더에 빌드 webpack이 빌드 결과물을 생성하는데, 이부분은 webpack에 대한 지식과 vue의 실제 배포방법을 몰라서 넘어가겠다.
조금더 공부하고, 다음글에서 위 Vue 프로젝트를 빌드 + 배포하는 방법을 알아보겠다.