[vue.js] visual studio code (VS code) 설치하기 및 Vue 프로젝트 생성

1.  VS code 설치

Documentation for Visual Studio Code

Documentation for Visual Studio Code

2. 작업 파일 생성

 

3. VS code 에서 폴더 열기

4. ctrl + `  로 터미널 열기 설치

 > npm install -g @vue/cli

 

5. node.js 설치

- node.js가 설치되어있지 않다면 npm 을 찾을 수 없다는 에러 표기가 된다

- node js 다운로드, 안정적인 버전으로 선택한다.

 node.js 설치 (링크)

6. nodejs 설치 완료 후 cmd 에서 설치 확인한다

 

7. node.js 설치 파일 경로 확인 & 환경변수를 설정한다

C:\Program Files\nodejs

시스템 환경 변수 편집에서 path에 환경변수를 추가해준다

 

9. VS code 에서 npm 명령어가 정상 실행되는지 확인한다

 

10. 이제 vue/cli 을 설치한다

 > npm install -g @vue/cli

11. vue/cli 정상 설치 확인

12. vue 프로젝트 생성

vue create test

 

13. vue 프로젝트 Build 전 설정

- package.json 수정

- vue.js 는 default 로 8080 포트를 이용하는데, 백엔드 프로젝트가 이미 8080을 이용하고 있기 때문에 3000 변경

- build --watch 설정은 코드변경시 자동 재빌드 하기 

    "serve": "vue-cli-service serve --port 3000",

    "build": "vue-cli-service build --watch",