[ Vue.js 시작하기 ] 00. 개발 환경 설정

inflearn에서 수강 한 장기효(캡틴판교)님의 강의🔗정리입니다.

---

프로그램 설치

• Visual Code Studio 🔗
• node.js LTS(Long Term Soft) ver. 🔗
• Chrome 🔗
• Vue3.js dev tools 🔗 | Vue2.js dev tools 🔗

 

수업 소스 코드 안내

https://github.com/joshua1988/learn-vue-js.git

GitHub - joshua1988/learn-vue-js: 인프런 Vue.js 시작하기 강의 리포지토리

https://joshua1988.github.io/vue-camp/textbook.html

Introduction | Cracking Vue.js

 

VSCode 플러그인 설치 및 저장 (확장 프로그램)

• Vetur : .vue파일의 코드 하이라이팅을 위해 사용
• Night Owl : VSCode 테마
• Material Icon Theme : 디렉터리 목록의 아이콘을 메테리얼 아이콘으로 보여줌
• Live Server : 시각적인 웹페이지를 만들때 많이 사용. 새로고침 하지 않아도 저장할 때마다 실시간 라이브로 반영되어 변경사항을 바로 확인 가능.
• ESLint : 자바스크립트 문법 검사기. 자세한 설정은 링크 참고!
• Prettier : 코드를 자동으로 정렬해주는 Formatter
• Auto Close Tag : 시작태그를 열면 자동으로 끝 태그가 닫힘
• Atom Keymap : Atom에서 자주 사용하는 바로가기 키 사용 가능

뷰 개발자 도구 소개 및 실행 방법

소스코드 또는 html 파일에서 Open with Live Server실행

 🚨 <Vue.js 시작하기> 강의는 vue2버전으로 촬영되었으나 현재 받을 수 있는 파일이 vue3로 변경되어 vue3로 진행해보기로 하였습니다.
참고 링크 : https://www.inflearn.com/questions/368551

devtools에 Event탭이 안 보입니다. - 인프런 | 질문 & 답변