001. Vue 개발 환경 준비하기.

Vue.js

vue를 개발하기 위해서 기본적으로 아래 3개의 프로그램들을 설치했다.

• chrome(크롬)
• Visual Studio Code(vscode)
• Node.js(노드)

01. chrome 설치

구글이나 네이버에서 chorme 설치를 검색해서 들어간 다음에 설치하면 된다.

(https://www.google.co.kr/chrome/?brand=CHBD&gclid=Cj0KCQjwraqHBhDsARIsAKuGZeFqu6pZZwdniWJAEfUyTIWFT0_0s51DUbMZU9liEcF8Uy1U86qmfm4aAqUEEALw_wcB&gclsrc=aw.ds)

Chorme 다운로드를 클릭해서 다운로드하고 설치한다.

 

02. Visual Studio Code 설치

구글이나 네이버에서 vscode를 검색해서 들어간 다음에 설치하면 된다.

(https://code.visualstudio.com/)

 

[Download for Windows] 를 클릭해서 다운을 받고 설치한다.

03. Node.js 설치

구글이나 네이버에서 nodejs 설치를 검색해서 들어간 다음에 설치하면 된다.

(https://nodejs.org/ko/)

보통 LTS버전을 설치하면 된다.

LTS : 안정적이고 신뢰도가 높은 버전

현재 버전(Current) : 최신 버전

LTS버전을 설치한다.

04. Visual Studio Code(vscode) 확장 프로그램 설치

뷰를 사용해서 개발 시 보다 편리하게 개발하기 위해서 아래의 확장 프로그램을 설치하는 것을 추천한다.

vscode를 실행하고 왼쪽아이콘 중 5번째 아이콘(ㅁ상자 4개있는 것)을 클릭해서 아래 리스트들을 검색 후 설치를 한다.

• Vetur
  뷰 파일(.vue)의 코드 하이라이팅을 위해서 사용함.
• Live Server
  브라우저에서 즉시 변경사항을 볼 수 있음.
• Auto close Tag
  HTML태그 자동 닫기 기능
• Prettier
  코드 정렬
• Night Owl
  소스 코드를 강조해주는 테마라고 하는데..(잘 모르겠음.)
• Material Icon Theme
  파일 아이콘들을 변경해준다.

05. 크롬 확장 프로그램 설치(Vue.js devtools)

Vue 전용 크롬 개발자 도구(F12 or Ctrl + Shift + i or 마우스 오른쪽 클릭 + 검사)를 설치해준다.

구글에서 '크롬 vue.js devtools'를 검색해서 들어가거나 아래 링크를 클릭한다.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=ko 

Vue.js devtools

 

[Chrome에 추가]를 선택한다.

개발자 도구를 열고 Vue탭을 클릭하면 아래와 같은 창을 확인할 수 있다.

끝.