[Vue] CLI 설치와 2.x, 3.x버전 차이, 프로젝트 생성하기

CLI 란 명령어를 통해 특정 액션을 수행하는 도구

 

Vue CLI 설치

1. 공식사이트 접속

https://cli.vuejs.org/

Vue CLI

1) vsCode 에서 상단에 터미널 새로 open (ctrl + shift + `)

2) node -v 명령어로 node 버전 확인하기 (v10 이상으로 맞춰야 이후 실습과 동일하게 진행할 수 있다)

* node : 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식 되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.

설치했는데도 위와 같은 에러가 발생하면, VSCode 가 실행중일 때 설치된 것으로 node.js 를 인식 못할 수 있으니 VSCode 를 재시작하면 해결할 수 있다.

3) npm -v 명령어로 npm 버전 확인하기 (v6 이상으로 맞춰야 이후 실습과 동일하게 진행할 수 있다)

4) get start > installation 에서 아래 명령어로 vue 설치

5) 설치가 완료되면 Window 기준으로 아래 경로에 설치된다.

C:\Users\AppData\Roaming\npm\node_modules

 

Vue CLI 2.x vs 3.x

[Vue CLI 2.x]

vue init '프로젝트 템플릿 유형' '프로젝트 폴더 위치'

 

[Vue CLI 3.x]

vue create '프로젝트 폴더위치'

 

프로젝트 생성 및 서버 실행

 

1) 프로젝트를 생성해보쟈

나는 vue-cli 라는 폴더에 프로젝트를 생성하려고 한다.

vue create vue-cli

 

[Error] vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com /fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1

 

근데 에러 뜸;;

power Shell(관리자 권한실행) 에서 아래 명령어 실행후 Y 누르면 create 가능!

Set-ExecutionPolicy -ExecutionPolicy Unrestricted

다시 원복하려면 

Set-ExecutionPolicy -ExecutionPolicy Undefined

2) 위 vue create 명령어를 실행하면

내 Vue CLI 버전을 확인하고 preset 을 선택할 수 있다.

나는 Vue CLI 5.x 라서 Vue 2 default로 선택했다.(강의에서 4.5.x이상은 Default([Vue 2] babel, eslint) 사용을 권장

 

 

3) 정상 생성이 된다면 아래와 같이 상태와 명령어 2개가 나온다.

 

4) 2개의 명령어를 실행하면 아래와 같이 서버가 올라간다.

(VSCode 의 팁을 따라 local 주소를 alt + 클릭하면 프로젝트가 생성된 것을 확인할 수 있다.)

 

5) 탐색기를 통해 프로젝트를 확인해보면 아래와 같은 구조로 생성이 되어있는것을 확인할 수 있다.