vue.js 개발환경 설정 -아톰, node.js, 뷰 개발자도구

1. 아톰 에디터 설치

아톰(Atom) 텍스터 에디터는 깃허브에서 제작한 무료 텍스터 에디터.

100% 무료이고, 확장플러그인을 이용해서 유용한 기능을 추가할 수 있기 때문에 기능면에서도 우수하다

아톰 에디터 다운로드 주소 https://atom.io/

아톰에디터의 File - setting 에서 아래 플러그인 설치 가능

- Themes : seti-ui 플러그인 : 직관적인 파일아이콘 제공, 색깔 조합이 눈에 너무 튀지않아 장시간 코드봐도 눈에 덜 부담

- atom-material-syntax-dark : 자바스크립트 코드 구문 강조색 조합 잘되있어서 코드 가독성 높아짐

+language-vue 패키지 설치시 vue 코딩 용이

2. node.js 설치

https://nodejs.org/ko/

3. 뷰 개발자 도구 설치 (크롬)

구글에서 Vue.js devtools 검색

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

확장 플러그인 설치시 크롬 개발자 도구의 뷰 패널에서 디버깅 가능함