# Age of Vue.JS 학습
# 개발환경 설정
## 크롬 설치
Chrome 웹브라우저
더욱 스마트해진 Google로 더 심플하고 안전하고 빠르게.
www.google.com
## Visual Studio Code 설치
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
## node.js 설치
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
- LTS 다운로드
## vue.js dev tools
chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related
Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
chrome.google.com
# VSCode에서 수업 코드 보는 방법
joshua1988/learn-vue-js
인프런 Vue.js 시작하기 강의 리포지토리. Contribute to joshua1988/learn-vue-js development by creating an account on GitHub.
github.com
- 자료 받아서 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 패널 사용