[Vue] Vue.js 개발 환경 셋팅

2019. 3. 4. 17:09Web/Vue.js

[Vue] Vue.js 개발 환경 셋팅

vue.js 개발 환경을 위해서 몇 가지 필요하다고 생각하는 것을 설치하도록 하겠습니다.

  1. Chrome
  2. Node.js
  3. VS Code
  4. Vue.js devtools

Chrome 브라우저 설치


뷰로 화면 개발을 하려면 첫 번째로 구성해야 할 환경이 바로 브라우저입니다. 구글에서 개발한 크롬 브라우저는 최신 웹 트렌드와 문법을 빠르게 반영하고 있는 브라우저이며, 웹 개발 시 편리한 기능을 제공하는 크롬 개발자 도구를 지원합니다.

크롬 브라우저는 공식 사이트 또는 검색 사이트에서 '크롬'이나 'Chrome'으로 검색하여 설치하시면 됩니다.

Node.js 설치


1. node.js 홈페이지 접속 후, 현재 버전이 아닌 LTS 버전을 다운로드 합니다.


.
.

(중간 설치 과정은 생략하겠습니다...)

.
.

2. 설치가 완료되면 터미널에서 정상적으로 설치되었는지 확인합니다.

Windows : Win키 + R → 'cmd' Enter

  • node -v
  • npm -v (요즘에는 node.js를 설치하면 npm이라는 것이 같이 설치됩니다.)

에디터(VS Code) 설치


1. VS Code란?

  • MS에서 제공하는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며, IntelliSense와 Git 기능, 그리고 Extension 을 이용한 확장 기능을 제공하고 있습니다.

2. 설치방법

  • Visual Studio Code 다운로드에 접속하여 Download 해줍니다.

  • 여러분들이 사용하는 버전에 맞게 설치하시면 되겠죠?^^

    .
    .

    (중간 설치 과정은 생략하겠습니다...)

    .
    .

    뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인) 설치


뷰 개발자 도구(뷰 크롬 플러그인)는 뷰로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있습니다.

1. 구글에서 vue.js devtools를 검색하면 아래와 같은 결과 화면이 나옵니다.

2. 첫 번째 링크 'Vue.js devtools - Google Chrome'를 클릭하면 아래와 같이 크롬의 플러그인 스토어로 이동합니다. 팝업 페이지 상단 오른쪽에 있는 [CHROME에 추가] 버튼을 클릭합니다.

3. 그러면 아래와 같이 설치 여부를 묻는 팝업 창이 나타납니다.

[확장 프로그램 추가] 버튼을 클릭하면 브라우저 주소 창 오른쪽에 다음과 같이 뷰 로고 모양의 아이콘이 생기고, 추가되었다는 메시지의 팝업 창이 나타납니다.


여기까지 Vue.js 개발 환경 셋팅을 해봤습니다.
추가적으로 VS Code에 필요한 플러그인이나 개발자 분들 취향에 맞게 다른 텍스트 에디터를 쓰시는 분들도 계실겁니다.
저는 제가 사용하는 환경에 맞게 포스팅 했으므로 다른 곳과 다르더라도 이해해주세요^^

그럼 포스팅은 여기까지 마치겠습니다.

'Web > Vue.js' 카테고리의 다른 글

[Vue.js] Vue의 Router(라우터)  (0) 2019.03.21
[Vue] Vue.js 프로젝트 구조  (0) 2019.03.16
[Vue] Vue.js란 무엇인가?  (0) 2019.03.04