Vue 개발 환경 세팅

node/nvm 설치 & vs code 설치 

해당 내용은 React에서 다뤘으니 아래 포스팅을 참고 부탁드립니다.

2022.10.10 - [Programming/React] - [React] 개발환경 세팅하기

 

 

vs code extension설치

Vetur

.vue 파일의 코드 하이라이팅, 인텔리센스

 

Vue 3 Snippets :

.vue 파일 초기 구성 생성

.vue 파일에서 vuevueinit입력

 

Vue CLI 설치

Vue CLI는 기본 vue 개발 환경 설정 도구입니다.

기본적인 vue 프로젝트 세팅을 해주기에 세팅에 대한 고민을 줄일 수 있습니다. 

 

npm install -g @vue/cli 
# or 
yarn global add @vue/cli

프로젝트 생성

vue create test-app

 

 

Vue 버전 선택

저는 vue3 버전으로 프로젝트를 구성하기 위하여 Vue 3를 선택하였습니다.

 

 

yarn or npm 선택

첫 프로젝트를 만들경우 패키지 관리를 yarn으로 할지 npm으로 할지 선택하는 창이 나옵니다.

저는 yarn으로 관리할 생각이기 때문에 yarn으로 선택하였습니다.

첫 선택 이후에는 자동으로 yarn으로 지정되는 것으로 보입니다. 

 

 

프로젝트 실행

cd test-app
yarn serve
# or 
npm run serve

 

브라우저 주소창에 localhost:8080을 입력하여 실행된 프로젝트를 확인합니다. 

아래와 같은 화면이 나오면 정상적으로 실행 된 것입니다.

 

Vue 프로젝트 정상 동작