본문 바로가기
Study/Vue

[Vue] Vue CLI 란? (+설치 방법)

by JYHAN 2020. 12. 7.

 Vue CLI란?

뷰로 빠르게 프로젝트를 구성하고 프로토 타이핑을 하고 싶을 때 사용하는 CLI 도구입니다.

CLI란?

Command Line Interface로 사용자는 커맨드 창을 통해 문자로 입력을 주는 것을 말합니다.

Vue CLI 설치

1) 먼저 node.js를 설치해야 한다.

 

2) Node.js를 설치했다면 아래 명령어를 버전을 확인합니다.

npm은 Node Package Manager로 node.js를 설치할 때 함께 설치됩니다.

node -v // 10 버전 이상
npm -v 	// 6 버전 이상

3) 아래 명령어를 통해 vue cli를 설치합니다.

npm install -g @vue/cli

4) Vue CLI 설치 명령어

[Vue CLI 2.x] 명령어
vue init '프로젝트 템플릿 유형' '프로젝트 폴더 위치'
vue init 'webpack-simple' '프로젝트 폴더 위치'

[Vue CLI 3.x] 명령어
vue create '프로젝트 폴더 위치'

Tip) VSCode에서  vue create 명령어는 terminal의 cmd 창에서 입력해야 한다.

  1. 초기 세팅이 powershell인 경우 다음과 같이 변경할 수 있다.
  2. File - Preferences - Settings
  3. 상단 검색창에 shell: windows 입력 - Terminal > Intergrated > Shell: Windows의 하단 Edit in settings.json 클릭!!
  4. terminal.integrated.shell.windows의 값을 cmd.exe로 변경

5) cd '프로젝트 폴더 위치' & npm 실행

npm 실행

cd '프로젝트 폴더 위치'
npm run serve

 

 

댓글