Vue CLI 웹팩

Vue CLI(Command Line Interface) 란?

뷰 코어팀에서 제공하는 일종의 터미널용 도구

node를 설치 후, Vue CLI 설치

install vue-cli -global

Vue CLI 프로젝트 명령어

템플릿 종류	설명
vue init webpack	고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init webpack-simple	웹팩 최소기능을 활용한 프로젝트
vue init sinple	최소 뷰 기능만 들어간 HTML파일 1개 생성
vue init pwa	웹팩 기반의 프로그래시브 웹 앱 기능을 지원하는 뷰 프로젝트

• webpack 같은 모듈 번들러 프로젝트는 자체적으로 Vue로더를 포함함
• Vue 로더는 .vue 확장자 파일을 html, js, ccs로 변환함
• Vue 로더가 포함된 프로젝트를 생성하면 vue 확장자 파일을 사용할 수 있음

Vue CLI 로 webpack 프로젝트 생성

vue init webpack 프로젝트명

• index.html : 뷰로 만든 웹 앱의 시작점
• webpack.config.js : 웹 팩 설정파일. 웹팩 빌드를 위해 필요한 로직들을 정의하는 파일
• package.json : npm 설정 파일이 있음 Vue 라이브러리 정보 포함

실행

npm run dev : webpack-dev-server(node 기반 서버) 를 실행함

npm run build : dist 폴더에 빌드 결과물 생성됨