Vue 3.0 - 개발 환경 구축

1.VS Code 다운로드

공식 사이트에서 VSCode를 다운로드 받아 설치

https://code.visualstudio.com/

2.Vue.js 개발을 도와주는 Extension 설치

• Live Server: 작성된 html을 자체 내장 서버에서 실행시켜 준다.

• Vue Language Features(Volar): Vue 공식 추천 extension

• Vue 3 Snippets: Snippets을 이용해서 코드 자동 완성을 지원한다.

• Prettier - Code formatter: js, css, html 코드 작성 시 format을 일정하게 문서를 수정한다.

• auto rename tag: 시작태그 수정 시 닫는 태그까지 자동으로 수정해준다.

• Material Icon Theme: 아이콘이 이뻐진다.

• Indent rainbow: 들여쓰기에 컬러 표시로 가독성을 향상시킨다.

React, Vue 상관없이 추천하는 익스텐션
Auto Close Tag 여는 태그를 만들면, 닫는 태그를 자동으로 생성해줍니다.

파일 및 Path 자동 완성 기능

Node.js 설치

Node.js 설치를 위해서 아래 사이트에서 안정적인 LTS 버전을 다운로드 한다.

https://nodejs.org/ko/

버전확인

C:\Users\itsme>npm -v
6.14.4

Vue.js devtools 설정

크롬 웹 스토어에서 Vue.js의 devtools를 설치해보자.

설치 주소

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

설정 > 도구 더보기 > 확장프로그램으로 이동해서 Vue.js devtools의 세부 정보를 살펴보자.

하단의 내용에서 파일 URL에 대한 액세스 허용을 체크해준다.