[Udemy Vue 완벽가이드 Section7] 80. Vue CLI 설치 및 사용하기

Vue CLI는 지금까지 사용해 온 Vue 프레임워크와는 다르며, 부가적인 도구일 뿐이다. Vue 개발팀이 관리하는 도구.

Vue CLI는 내장된 특정 도구와 특정 구성을 이용해서 프로젝트 생성에 도움을 준다.

더욱 현실적이고 큰 규모의 애플리케이션을 구축할 수 있도록 프로젝트를 생성하고 관리하는데 도움이 된다.

 

Vue CLI는 필요로 하는 특정 도구를 내부에서 사용한다. → Node.js

 

 

1/ Node.js 설치.

- 왜냐하면 Vue CLI가 내부적으로 Node.js를 사용하기 때문이다.

- Node.js를 다운받으면, Node.js와 함께 따라오는 또다른 도구로 npm도 설치된다.

- npm이란, node package manager를 의미. 시스템에 Vue CLI를 설치하거나 프로젝트에 필요한 추가 패키지를 설치할 때 사용한다.

 

2/ Vue CLI 설치

터미널을 열어 아래 코드를 입력하여 Vue CLI를 설치한다.

sudo npm install -g @vue/cli

 

 

3/ 저장할 곳을 찾아서 프로젝트를 생성.

- 이름은 마음대로 지어도 되지만, 공백은 없어야한다.

vue create vue-first-app

 

이제 Vue 프로젝트를 갖는다. 하지만 이번에는 추가적인 특정 기능이 있는 Vue 프로젝트이다.

Vue 개발자인 우리를 도와주는 기능들이다. 

 

4/ npm run serve 명령어 입력

- 생성된 Vue앱이 작동하는걸 확인하기 위해 실행할 수 있는 명령어.

- 테스트웹 개발서버 가동을 위한 명령어.

- 위 명령어 입력 시, 생성된 기본 더미앱이 호스팅된다.

 

 

이제 브라우저에서 위 주소로 앱을 확인할 수 있다. file 프로토콜 대신, HTTP 프로토콜을 사용하고 있다.

**주의 : 프로젝트 작업 중에는 웹 서버 프로세스를 계속 가동해야한다. 작업을 끝내려면 ctrl+C로 종료.

 

주소창에 위 주소(http://localhost:8080/)를 치면 아래와 같은 화면이 나온다.

즉, 개발서버가 가동되고 있고, Vue 프로젝트가 잘 생성되었다는 뜻이다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.