Vue.js 환경설정

1. node.js 설치

node.js 설치하면 npm 사용가능

설치 후 잘 설치되었는지 버전 확인 명령으로 확인

node -v

 

https://nodejs.org/en/

Node.js

 

2. VS Code(Visual Studio Code) 에디터 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

3. 작업폴더 생성 및 오픈

탐색기에서 작업폴더를 생성한다.

작업폴더를 연다. File -> Open Folder...

 

4. terminal에서 명령어 입력

npm install -g @vue/cli

vue create 프로젝트명

 

* 설치된 npm 리스트 확인

npm ls

npm ls -g

* 특정 npm 버전 확인

npm show [패키지명] version

 

5. 실행하려면 터미널에 npm run serve 명령어 입력하고 웹브라우저에서 http://localhost:8080/ 입력

 

6. 기타 플러그인 설치

Vetur, HTML CSS Support, Vue 3 Snippets 설치

 

7. 크롬 플러그인 설치

구글에서 Vue.js devtools 검색

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

Vue.js devtools

설정 -> 도구 더보기 -> 확장 프로그램 -> "파일 URL에 대한 엑세스 허용" 체크