맥 개발환경 세팅, 맥에 Vue.js 설치 & 프로젝트 만들기 (w. Visual Studio Code)

Vue.js 설치

vscode 를 설치한다

자신의 버전에 맞는 vscode 를 설치하면 된다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

Vue Language Features(Volar) 설치

VSCODE 에서 volar을 검색해 "Vue Language Features (Volar)"을 설치한다.

 

 

 

 

Node.js 설치

아래 Node.js의 사이트에서 Node.js를 설치한다.

 

https://nodejs.org/ko

Node.js

 

 

설치 잘 됐는지 터미널에서 확인 (선택사항)

 

 

VSCODE에서 터미널 > 새 터미널 실행

 

 

 

 

터미널창에서 Vue.js 설치 명령어 작성

앞의 "sudo"는 권한 부여 명령어. 안쓰고 명령해도 되지만 그냥 쓰고 명령하는게 두 번 일 안한다. (왜 아는지는 비밀...ㅜ)

 

sudo npm install -g @vue/cli

 

 

설치된 Vue 버전 확인 (정상 설치 확인)

vue --version

 

 

 

프로젝트 생성

아래 명령어 입력 후 , 선택하는 창에서 3개 중 vue 3로 생성한다. (차이는 모르겠고 수업 때 선생님이 Vue3로 하라고 했다.)

vue create [설정할 프로젝트 이름]

 

 

만약 여기서 에러 메세지 발생...하면 

 

 

에러메세지가 뜨면 다음과 같이 입력한다. 

sudo chown -R 501:20 "/Users/[본인경로]/.npm"

//예시
sudo chown -R 501:20 "/Users/iseoyeon/.npm"

 

 

노트북 비밀번호 입력 -> 기존 파일이 있으면 overwrite 하기

 

 

아래와 같이 창 뜨면 파란색 글씨 똑같이 써주기

cd test1
npm run serve

 

 

그럼 완료. Local 의 링크 cmd + 링크 클릭 하면 들어가진다.

 

 

끝. 경로는 왜인지 모르겠지만 원래 생성해서 켜놨던 편집기에 쏙 들어감. 어리둥절

 

 

서버를 재실행

ctrl + c 로 터미널 창 띄우고 아래 메세지를 입력한다.

npm run serve

 

 

https://11uding.tistory.com/47

[Mac] vue.js 설치하기, 맥북 - 유딩동 Tistory