09. 뷰 CLI(Command Line Interface)

  CLI(Command Line Interface)는 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구입니다.

  .vue 파일 방식으로 애플리케이션을 개발하려면 뷰 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요합니다. 웹팩은 자바스크립트 모듈만 인식할 수 있기 때문에 뷰 로더가 .vue 파일을 일단 자바스크립트 모듈로 변환합니다. 뷰 로더는 생성된 프로젝트의 webpack.config.js 파일에 적용되어 있습니다. (test : 로더가 적용될 대상 파일을 지정하는 속성, loader : 적용할 로더의 종류를 지정하는 속성)

 

1. 뷰 CLI 설치

  명령 프롬프트 창(Window) or 터미널(Mac) 실행 후 npm install vue-cli -global 입력으로 설치 > vue 명령어 인식 확인

2. 뷰 CLI로 프로젝트 생성

  뷰 프로젝트를 생성할 빈 폴더를 하나 생성하고 vue init webpack-simple 입력

sass : 확장된 CSS언어 설치 여부

템플릿 종류	설명
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) 기능을 지원하는 뷰 프로젝트

3. 관련 라이브러리 설치 : npm install

프로젝트 구조

> node_modules : npm install 명령어로 다운받은 라이브러리가 존재하는 위치

> src : .vue 파일을 비롯하여 애플리케이션이 동작하는 데 필요한 로직이 들어갈 위치

     index.html : 뷰로 만든 웹 앱의 시작점. npm run dev 실행 시 로딩되는 파일

     package.json : npm 설정 파일. 뷰 애플리케이션이 동작하는 데 필요한 라이브러리들을 정의하는 파일

     webpack.config.js : 웹팩 설정 파일. 웹팩 빌드를 위해 필요한 로직들을 정의하는 파일

 

4. 프로젝트 구동 : npm run dev

실행 화면