[Do it! Vue.js 입문] 01. 개발 환경 설정하기

Do it! Vue.js 입문

Vue.js 학습을 위한 개발 환경 설정하기

우선 아래의 도구들을 설치한다.

( 기존에 사용하던 텍스트 에디터나 통합개발환경(IDE)가 있다면 그걸 사용해도 되지만, 책을 따라가기로 했다. )

• 크롬 브라우저
• 아톰(Atom) 텍스트 에디터
• 노드제이에스(Node.js)
• 뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인)

---

#크롬 브라우저 설치

Chrome이나 크롬을 검색해 다운로드 URL(https://www.google.com/intl/ko/chrome/)에 들어가 Chrome을 설치한다.

Chrome 웹브라우저

 

---

#뷰 개발자 도구 설치

파이어폭스, 사파리에도 뷰 개발자 도구가 존재하지만,

크롬을 사용할것이기 때문에 구글에 vue.js devtools를 검색해 Vue.js devtools를 설치한다.

Vue.js devtools

 

Chrome에 추가를 누르면 설치가 완료되고, " 'Vue.js devtools'을(를) 추가하시겠습니까? "라는 알림창이 뜬다. 확장 프로그램 추가를 누른다.

 

 

크롬 주소창 우측 확장 프로그램에 Vue.js devtools이 추가된걸 확인할 수 있다.

 

---

#아톰 텍스트 에디터 설치

Atom 홈페이지(https://atom.io/)에 들어가 다운로드하면 된다. (OS에 따라 다운로드할 파일이 바뀌는듯하다.)

만약 플랫폼이 안맞다면 Other platforms을 눌러 Github에서 맞는 플랫폼을 다운로드하면 된다.

A hackable text editor for the 21st Century

#아톰(Atom) 파일 만들기

Add folders를 클릭해 폴더를 선택하고

 

File의 New File(Ctrl+N)으로 파일을 만들고 Ctrl+S로 저장으로 한다.

이때 뒤에 붙이는 확장자에 따라 파일 형식이 정해진다.

 

#아톰(Atom) 테마 설치

File의 Settings를 선택해 셋팅창의 Install을 연다.

 

Themes를 선택한 뒤, seti-ui (UI 테마) 와 atom-meterial-syntax-dark (syntax 테마) 테마를 검색해 설치한다.

(책에서 추천한 테마는 위의 두 테마지만, 테마가 굉장히 다양하므로 취향에 맞게 다른걸 설치해도 된다.)

 

 

설치된 테마는 Settings의 Themes에서 확인할 수 있다.

 

#아톰(Atom) 테마 설정

UI 테마를 Seti-ui, Syntax 테마를 atom-meterial-syntax-dark 테마로 설정한다.

테마를 적용 전

테마를 적용한 후

#아톰(Atom) 패키지 설치

Install에서 Packages를 선택하고, language-vue 검색해 설치한다.

language-vue는 아톰에서 vue.js(이하 '뷰'라 지칭) 사용하기 위해 설치하는 기능으로 템플릿 자동완성 등의 기능이 구현되어있다.

 

설치 후 따로 설정하지 않아도 되며, atom을 재실행해야 적용이 된다.

적용이 되면 왼쪽 아래 캡처본처럼 자동완성 기능이 표시된다.

자동완성을 원하면 마우스로 클릭하거나, Tab키를 누른다.

 

 

---

 

---

#Node.js 설치

Node.js 홈페이지(https://nodejs.org/ko/)에 들어가 LTS 버전을 다운로드한다.

Node.js

책에서는 8.9.1 LTS 버전이었다.

명령 프롬프트창에 node -v를 쳤을때 설치된 버전이 나오면 설치가 완료된 것이다.

 

[Node.js] nvm으로 쉽게 Node 버전변경하기