[Vue.js 시작하기] Vue Cli 설치

이걸 이제야 정리해서 올린다;

Vue CLI 환경에서 프로젝트를 새로 설치하며 한 번 정리해두고 가면 좋을 것 같아 정리한다.

아래 공식페이지에 들어가면 다양한 설치 방법에 대한 안내가 나와있다.

설치방법 — Vue.js

 

참고로 CDN/NPM 두 방식 모두 경험해본 바로

CDN 방식으로 시작하면 좀더 간편하고 빠르게 구현 가능한데 반해,

외부에서 제공하는 라이브러리이기 때문에 가끔 로딩 속도가 느려서 답답할 때가 많았다.

뭣보다 NPM 환경에서는 다양한 개발 도구 및 라이브러리를 가져다 쓸 수 있다는 게 진짜 강력하다고 느껴졌다.

 

Vue 프로젝트 폴더 생성

vue create 프로젝트명

 

Vue 설치

1. npm으로 vue를 설치한다.

npm install vue

그러면 버전을 선택하라는 메시지가 뜨는데 나는 Vue 2로 설치했다.

실무에선 아직 Vue 2를 많이 쓰기도 하고, 교육 레퍼런스도 더 많다는 글을 봤기 때문.

 

제대로 설치됐는지 확인하려면 아래 명령어를 입력한다.

npm vue -v

설치된 Vue 버전을 알고싶으면 아래 명령어를 입력한다.

vue --version

 

Vue Cli 설치

npm install -g vue-cli

 

Vue Application 실행 화면

cd 프로젝트명 이라고 쳐서 프로젝트 경로까지 진입한 다음에

npm run serve 한다.

 npm run serve

그러면 포트번호가 뜰건데, 해당 Local 포트로 접속하면

아래와 같은 Welcome 페이지가 뜬다. 그러면 진짜 끝 !!!!