VueCLI 설치

책을 보고 공부한 VueCLI설치 방법을 simple하게 작성해보았습니다.

1 컴퓨터(노트북)에서 아래를 실행한다.

• 윈도우의 경우 : 명령프롬프트(cmd)
• 맥의 경우: 터미널

2 아래의 코드를 실행한다

npm install vue-cli -global

3 조금 기다린다

vue-cli@2.9.6
added 236 packs ~~~

조금 기다리면 위의 command가 나오면서끝날 것이다.

4 vue 검색

$ vue

딱 위의 vue만 검색하면 아래에 Usage vue<command> [options]라고 하면서 나올 것이다

5 CLI 명령어

1. vue init webpack

• 테스팅, 문법 검사 등을 지원

2. vue init webpack-simple

• 웹팩 최소 기능을 활용한 프로젝트 구성 방식
• 빠른 화면 프로토타이핑 용

3. vue init browserify

• 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식
• 테스팅, 문법 감사 등을 지원

4. vue init browserify-simple

• 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식
• 빠른 화면 프로토타이핑용

5. vue init simple

• 최소 뷰 기능만 들어간 HTML 파일 1개 생성

6. vue init pwa

• 웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

6 Vue CLI로 프로젝트 생성하기

vue init webpack-simple

위의 command를 입력하면된다.

그럼 아래와 같은 것을 입력하라고 나온다.

Generate project in current directory? Yes
Project name sample-test // 자신이 하고 싶은 project 이름으로 하기
project description 프로젝트 설명 작성
Author 제작자 <제작자이메일@gmail.com>
License 라이센스 유형은
Use sass? Yes or No

를 완료 하면 아래와 같이 나올 것이다

to get started:
  npm install
  npm run dev

쫄지 말고 마지막으로

npm install

위의 command를 입력하자 그럼 package.json파일에 등록된 자바스크립트 라이브러리를 모두 다운로드가 될것이다.

마지막 실행 command!

npm run dev

를 실행 하면 아래와 같은 화면이 나올 것이다!

[출처] 직접 캡처