반응형
# Age of Vue.JS 학습
# 개발환경 설정
## 크롬 설치
## Visual Studio Code 설치
## node.js 설치
- LTS 다운로드
## vue.js dev tools
chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related
# VSCode에서 수업 코드 보는 방법
- 자료 받아서 VSCode 실행 후 드래그 앤 드랍으로 보면 된다.
# VSCode 플러그인 설치 및 설정
- VSCode 실행
- 왼쪽 항목 중 사각 박스(Extensions, 확장) 클릭 후 아래 항목들 검색하여 설치
Vetur
Material Icon Theme
Night Owl
Live Server
ESLint
Prettier
Auto Close Tag
Atom Keymap
## VSCode 설정
- 아이콘, 컬러 테마 설정
File > Preferences > File Icon Theme 클릭하여 Meterial Icon Theme 선택
File > Preferences < Color Theme 클릭하여 Night Owl 선택
- index.html 파일 등 우 클릭(또는 열린 파일에서 우 클릭) > Open with Live Server 클릭 시 작성한 파일 실행 가능하다.
# 뷰 개발자 도구 소개 및 실행 방법
- html 파일에서 우 클릭 > Open with Live Server 클릭 하여 브라우저로 해당 코드의 내용들을 살펴 볼 수 있음.
- 코드 변경하면 브라우저에서 바로 확인 가능
- 크롬에서 F12로 크롬 개발자 도구 실행 가능
- 개발자도구 패널에서 Vue 패널 사용
출처 : 인프런 Age of Vue.JS
반응형