본문 바로가기
etc

[Vue.js] Vue.js 소개 및 기본 세팅 방법

by 우주다람쥐 2018. 9. 5.
반응형

1. Vue.js란

 

Vue.js는 Angular, React와 같은 자바스크립트 프레임워크 이다.

Google Vreative Lab에서 일하던 에반 유가 2013년 12월에 UI를 빠르게 개발하기 위해 만들었다.

그렇기 때문에 웹 화면 작성에 최적화된 프레임워크 이다.

 

자세한 내용은 Vue.js 공식 홈페이지에서 확인할 수 있다.

 

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

 

한국어로 된 페이지는 다음 URL에서 참고하면 된다.

 

시작하기 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

 

 

2. 개발 환경 설정

 

Vue.js를 학습하기 위해서는 적잘한 개발 환경이 필요하다. 이 책에서 사용할 도구는 다음과 같다.

 

- Node.js / npm / IDE (이 글에서는 Visual Studio Code를 사용한다. / 크롬 브라우저

 

위의 도구 중 처음 보는게 있다면 구글링 개요 정도는 찾아보고 오길 바란다.

안 보고 와도 살짝(?)은 알려주면서 할테니 걱정 마시라!

 

 

 

3. 개발 환경 설치

 

(1) node.js / npm

 

아래의 URL로 들어가서 설치하면 된다. node.js를 설치하면 npm도 같이 설치된다.

 

- Node.js 공식 홈페이지

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

(2) IDE

 

Visual Studio Code를 사용할 것 이다. 이 IDE의 장점은 무긍무진하게 많지만 무료이기 때문에 사용한다.

무료 IDE 중에서 제일 좋다고 생각한다. (개인적으로 좋아하는 것, 다른 거 써도 무방하다.)

아래의 URL로 들어가서 설치하면 된다.

 

- Visual Studio Code 공식 홈페이지

 

(3) 크롬 브라우저 및 Vue.js devtools 설치

 

크롬 브라우저를 깔지 않았다면 웹 개발자의 기본 자세가 안 되어 있는 것이다.

당장 설치하고 Vue.js devtools까지 설치하기 바란다.

아래의 URL로 들어가서 설치하면 된다.

 

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

 

Vue.js devtools

Chrome and Firefox DevTools extension for debugging Vue.js applications.

chrome.google.com

 

 

반응형

댓글