Vue.js 개발을 하기 전에 사전 설치 및 세팅 해야할 것들

1. Visual Studio Code 설치

Vue.js로 개발을 하기 위해 Microsoft 에서 만든 Visual Studio Code을 설치 합니다. 

 

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

2. Vue.js 플러그인 설치 (Vetur, Vue Peek, Vue 2 Snippets )

 

2-1. Vetur 

2.2. Vue Peek

 

2.3. Vue 2 Snippets 

 

 

 3. NodeJS 설치

 

Vue, Angular, React와 같은 자바스크립트 프레임워크들은 NodeJS을 사용하여 코드를 빌드하기에 NodeJS 을 설치해 줍니다.

 

https://nodejs.org/ko/

Node.js

3.1. node 버전 확인

$ node -v 

 

3.2. npm 버전 확인

$npm -v

 

 

4. vue cli 설치

 

4.1. vue cli 설치 ( 현재 vue-cli에서 사용가능한 최신 버전을 가져옵니다. )

$ npm install vue-cli -g

 

4.2. Tip. 특정 버전을 정확히 알고 있을 때

$ npm install vue-cli@2.9.6 -g

 

4.3. Tip. 특정 버전을 가져오고 싶지만 정확한 패키지 버전을 모르는 경우 

$ npm install vue-cli@^2.0.0 -g  (최신 2.xx 버전을 설치 합니다)

 

4.4. npm 모듈 설치에 대해서 더 보기

npm 특정 버전의 모듈을 설치하는 방법에 대해서 더 보기 

 

4.5. 설치된 vue cli 버전 확인

$ vue --version

 

4.6. vue cli 로 프로젝트 생성

 

$ vue init [템플릿이름] [프로젝트이름]

 

$vue init webpack hello-world

4.7. vue cli 의 템플릿 

$vue list

 

 

4.8. vue cli 으로 프로젝트 생성한 결과

 

4.9. 마무리

vue.js을 개발하기 위한 세팅은 모두 끝났습니다.