[Vue.js] 개발환경 구축

개발 환경 설정

1) Node.js : 서버측 JavaScript언어이자 플랫폼

2) npm : app의 의존성 관리를 위해 사용하는 노드 패키지 관리자

3) Visual Studio Code : 코드 편집 도구(IDE)

4) 크롬 브라우저 + vue.js Devtools : 디버깅을 위한 개발도구

5) Vue-cli : app 작성을 위한 기본 틀을 제공하는 도구

1. Node.js, npm 설치

Node.js는 Google의 v8엔진을 기반으로 만들어진 서버측 JavaScript 언어이자 Flatform이다. Node.js와 함께 설치되는 npm을 이용해 Vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리를 관리한다.

https://nodejs.org/ko

( 위의 사이트에서 Node.js 다운로드 후 설치)

설치가 끝나면 Windows에서는 CMD창을 실행, Mac에서는 터미널을 실행하여 아래의 명령어 수행

npm install -g npm (Windows)

sudo npm install -g npm (Mac)

2. Visual Studio Code 설치

Vue.js의 개발을 하기 위해서는 IDE가 필요한데 SublimeText, Bracket, Atom과 같은 많은 도구들이 있다. 하지만 나는 코드가 익숙하고, 다양한 플러그인이 존재하니 코드로 작업할 예정

http://code.visualstudio.com

( 위으 사이트에서 code 다운로드 후 설치)

Visual Studio Code에서 Vue.js 개발시 유용한 Plugin List

1) View-in-browser : html 파일을 기본 브라우져로 볼 수 있도록 한다.

2) vetur : Vue.js 코드에 대한 문법 강조, 코드 자동완성, 디버깅, 린팅 기능들을 제공한다.

3) html snippets : html 태그 조작을 빠륵 ㅔ작성할 수 있도록 도와준다.

4) js-css-html formmatters : js, css html의 코드 자동완 성기능을 제공한다. 에디터 창에서 ctrl+sapce

5) vue 2 snippets : vue.js 2.0의 콛 ㅡ조작 지원과 문법 강조 기능을 제공한다.

6) vue-beautify : vue.js 코드에 대한 정리 배치 기능을 제공한다.

7) ESLint : 자바 스크립트 코드 스타일, 문법 체크 기능을 제공한다.

3. Chrome Browser, Extendtion Tool 설치

크롬 브라우져 설치후 확장 프로그램에서 Vue 검색후 vue.js devtools 설치

4. Vue-CLI 설치

Vue-CLI는 에반 유가 공식적으로 관리하는 커맨드라인 인터페이스 기반의 스캐폴딩 도구이다. Vue.js앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지 테스트, 필드, 의존성 부분에대한 셋팅을 제공해준다.

npm을 이용해 vue-cli 설치

npm install -g yarn @vue/clie (Windows)

sudo npm install -g yarn @vue/cli (Mac)

Vue CLI는 3.x 버전에서는 npm 대신 yarn 패키지 매니저를 주로 사용한다. yarn이 npm보다 실행속도가 빠르기 때문에 최근에는 yarn을 선호하는 추세