vue 설치

1.node 설치
2.npm 확인
3.vue 설치
4.vue cli 설치
5.프로젝트 생성
6.기타 에러 시

 

1.node 설치

https://nodejs.org/en

Node.js

 

node 버전확인:node -v

 

 

2. npm 설치버전 확인

Node 설치 시 자동설치완료

설치된 npm 버전확인:npm -v

 

3.vue 설치

npm install vue

npm update vue

 

4.vue cli 설치

npm install -g @vue/cli

npm update -g @vue/cli

 

 

5.vue 프로젝트 생성

프로젝트 경로로 이동

vue create <프로젝트명>

커맨드라인에서 옵션 선택 - vue3,vue2, manual

 

수동권장사양(스페이스 사용):Babel,Router, Vuex(상태관리),

Linear/Formatter(권장 컨벤션- ESLintStandard config)

린트모드 선택:Lint on save 선택

Babel, ESLint 등 설정옵션 파일의 package 포함여부: In package.json 선택

설정 재활용 prest 생성여부:Y, 명칭설정

 

설치 완료 후 생성된 <프로젝트명>으로 이동

실행

npm run serve

 

npm run serve -- --port 3000 ##실행 포트 변경 (8000->3000)

 

 

 

6.기타 에러 시

powershell 관리자권한 실행 및 Set-ExecutionPolicy Unrestricted 입력(보안관련)

노드 재설치(버전 낮춤)

yarn을 통한 설치:

npm install -g yarn

 

https://codingapple.com/unit/vue-3-installation-with-vue-cli/

 

7.vscode extenstion

Vetur:  코드 작성, 디버깅, 코드 스니펫 생성 등

 Prettier -  Code formatter: 코드 포맷터 중 하나로, 코드를 일관된 스타일로 자동으로 정리해 주는 도구

 JavaScript Debugger: JavaScript Debugger:브라우저에서 JavaScript 코드를 디버깅하기 위한 도구