Visual Studio Code에서 Vue.js 사용하기 1 - 설치 방법

Visual Studio Code에서 Vue.js를 사용하기 전에 먼저 Vue.js를 설치해야 한다.

순서는 다음과 같다.

 

참고로, cmd 창을 열어  npm install vue 를 입력하고 엔터하면 끝이지만

Visual Studio Code에서 터미널을 실행하는 방법이 포함되었다.

 

Visual Studio Code에서 Terminal > New Terminal를 클릭해서 cmd창을 연다.

 

하단에 터미널이 뜨는데

뜨지 않는다면 아래쪽 파란색 윗부분에 마우스를 올렸을 때 마우스 커서가 Vertical Resize 아이콘으로 바뀐다면 위로 끌어올려 터미널창이 숨겨진 것을 볼 수 있다.

 

터미널이 cmd가 아니라면 

+옆에 아래 화살표를 클릭하고, Command Prompt를 선택하여 터미널을 추가한다.

 

cmd 터미널에 npm install vue를 입력하여

최신 안정화 버전을 설치하는 vue.js를 설치한다.

 

이때, npm은 node.js package manager의 약자이면서 명령어이므로

"'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다."

라고 나온 다면 추가적으로 node.js를 PC에 설치하면 된다.

node.js 설치사이트

최신 버전이라 할지라도 버그가 있을 수 있기 때문에 안정적인 버전을 선택하여 설치하는 걸 권장한다.

 

그 다음 Vue.js는 단일 페이지 애플리케이션를 빠르게 구축할 수 있는 공식 CLI를 제공하므로 

터미널에 npm install -g @vue/cli 을 입력하여 Vue.js CLI를 설치한다.

 

 

Vue.js 관련 Visual Studio Code Extension(확장 프로그램) 설치 할 것!

- Vetur : 문법 강조, vue.js 파일 코드의 하이라이팅 지원
- Vue VSCode Snippets : 코드 조작 지원, vue.js 파일 초기 구성 생성
- vue-beautify : 코드정렬
- Live Server : 코드 변경 시 새로고침을 하지 않아도 페이지가 자동으로 새로고침 됨

- 브라우저에 Vue Devtools 추가 (크롬은 확장 프로그램에서) : 디버깅하기 쉽게 해줌