Vue 개발 환경 설정

프로그램 설치

1. VScode 설치 (다운로드)
2. Node.js 설치 (다운로드)
3. 크롬 브라우저 설치 (다운로드)
4. Vue.js devtool 확장프로그램 설치 (다운로드)

---

VScode 설정

플러그인	설명
Vetur	.vue 파일의 코드 하이라이팅 적용
Vue VSCode Snippets	.vue 파일 초기 구성 생성
Night Owl	코드 강조 플러그인(색 테마)
Material Icon Theme	테마 아이콘 플러그인(왼쪽 폴더의 아이콘이 변경됨)
Live Server	리얼타임 로컬서버
ESLint	javascript를 실행하지 않고도 기본적인 오류 찾기
Prettier	코드 자동정렬
Auto Close Tag	자동으로 HTML 태그 닫기
Atom Keymap	아톰 에디터 단축키 적용

---

뷰 개발자 도구 실행

크롬 브라우저에서 F12 키를 누르면 개발자 도구 실행이 된다.
Vue로 개발된 페이지에 접속된 경우 개발자 도구 상단에 "Vue"라는 탭 메뉴가 추가된 것을 확인 할 수 있다.