Vue-cli 3
Vue-cli 3 기반 개발
이 문서에서는 Vue-cli 3를 이용한 Vue application 개발 방법에 대해서 다룬다.
NodeJS 설치
Vue cli는 자바스크립트 패키지 매니저인 npm 또는 yarn을 이용하여 설치한다. 이 문서에서는 npm을 이용하여 설치하는 방법에 대해서 살펴본다.
npm과 yarn은 패키지를 설치하는 방식의 차이가 있다
Node JS 사이트를 방문하여 LTS 버전을 다운로드한다. 작성 시점의 LTS 버전은 16.15.1이다.
설치 시 특별히 추가 설정할 내용은 없다.
npm 설치 확인
설치가 정상적으로 잘 되었는지 확인하려면 Windows의 Command Line 또는 MacOS의 Terminal을 열어 다음과 같이 명령을 입력한다.
node js 설치 확인
npm 설치 확인
npm 필요 명령 확인
npm에서는 다음과 같은 명령을 사용하여 패키지를 관리할 수 있다.
패키지 설치 -
npm install [패키지명] [옵션]package.json에 있는 내용을 통해 필요한 패키지를 설치하는 명령패키지 추가 시 해당 패키지를 중앙 저장소에서 다운로드하여 현재 프로젝트에 설치
전역 설치 옵션인
--location=global추가 시 전체 디렉터리에서 사용 가능하도록 설치(주의) --global 옵션은 Deprecated 되었음
패키지 삭제 -
npm uninstall [패키지명]스크립트 실행 -
npm run <명령> [인자]npm run-script가 정식 명칭이지만 별칭인run을 더 많이 사용사용할 명령들은
js파일에 작성하여package.json에 등록되어 있어야 함Vue cli에서 사용할 명령
npm run serve - 개발 서버 실행 명령
npm run build - 프로덕션 빌드 명령
도움말 -
npm help
Vue cli 3 설치
npm을 이용하여 vue cli 3를 설치한다.
설치 시 시스템 전역에서 사용 가능하도록 --location=global 옵션을 추가한다.
Vue cli 3 설치 확인
설치가 완료되었다면 vue 명령을 사용할 수 있다.
Vue cli 명령 확인
vue --help 명령을 입력하면 vue cli에서 제공하는 명령을 확인할 수 있다.
Vue project 생성
다음 명령을 이용하여 첫 번째 프로젝트를 생성한다.
생성 과정에서 Vue 버전 선택 화면이 나오는데 Vue 3를 사용하도록 설정해야 한다.
이후 자동 설정이 계속 진행되어 프로젝트 생성이 종료된다. 과거에 비해 사용자가 입력해야 하는 정보들이 압도적으로 줄어들어 편하게 애플리케이션을 생성할 수 있다.
생성 완료 시 해당 프로젝트 폴더로 이동하여 스크립트를 실행하면 된다. 결과 화면에 나온 것처럼 cd 명령을 이용하여 폴더를 이동한다. 위 화면은 애플리케이션 이름이 demo 일 경우 나오는 화면이므로 본인 프로젝트 이름에 맞게 설정해야 한다.
npm run serve 명령을 실행하면 개발 서버가 준비되며 다음과 같은 결과 화면이 나온다.
표시된 주소로 접속하면 정상적으로 만들어진 프로젝트 화면이 나온다.
Last updated
