Front

[Vue]맥북 Vue 실습 환경설정 하기

1223gogo 2023. 4. 6. 10:05
vue create [프로젝트명]

vue cli를 이용하여 환경설정을 해줄 것이다.

1. Homebrew 설치

맥북 사용자에게 유용한 설치툴인 Homebrew를 이용하여 설치해보자. 

Homebrew 설치가이드

2. node 설치

- 터미널에 아래 코드를 실행시킨다.

brew install node

3. vue-cli 설치

- 같은 방식으로 터미널에 아래 코드를 실행시킨다.

 

brew install vue-cli

 

vue-cli 설치 완료

4. visual studio code 설치

- visual studio code 도 homebrew로 아래와 같이 설치해준다.

brew install --cask visual-studio-code

 

* visual studio code 기본이 영어로 설정되어있어서 한국어 세팅을 해준다.

- 확장 > korean 검색 > install > visual studio code 재시작

5. Visual Studio Code에서 열기 클릭 후 원하는 폴더 선택

- 저는 practiceVue 라는 폴더 생성해서 열었습니다.

 

6. 새 터미널 실행

7. vue 프로젝트 생성

- vue 설치되었는지 버전 확인

vue --version

vue 설치 완료

- vue 프로젝트 생성

vue create [프로젝트명]

- Vue 3 Default 로 생성해줍니다. (화살표로 선택 후 엔터(return)클릭)

8. vue 실행확인

cd [프로젝트명]
npm run serve

위의 코드를 차례로 터미널에 입력해주면 서버가 동작하는 것을 확인할 수 있다.

http://localhost:8080/ 으로 접속 테스트 후 확인하면 프로젝트 생성 완료다.