# Vue-cli 3 ## Vue-cli 3 기반 개발 이 문서에서는 Vue-cli 3를 이용한 Vue application 개발 방법에 대해서 다룬다. ### NodeJS 설치 Vue cli는 자바스크립트 패키지 매니저인 [npm ](https://www.npmjs.com/)또는 [yarn](https://yarnpkg.com/)을 이용하여 설치한다. 이 문서에서는 [npm](https://www.npmjs.com/)을 이용하여 설치하는 방법에 대해서 살펴본다. {% hint style="info" %} npm과 yarn은 패키지를 설치하는 방식의 차이가 있다 {% endhint %} [Node JS](https://nodejs.org/ko/) 사이트를 방문하여 LTS 버전을 다운로드한다. 작성 시점의 LTS 버전은 16.15.1이다. {% embed url="" %} node js 공식 홈페이지 {% endembed %}

설치 시 특별히 추가 설정할 내용은 없다.

### npm 설치 확인 설치가 정상적으로 잘 되었는지 확인하려면 Windows의 Command Line 또는 MacOS의 Terminal을 열어 다음과 같이 명령을 입력한다. #### node js 설치 확인 ```shell node --version ``` #### npm 설치 확인 ```shell npm --version ``` ### npm 필요 명령 확인 npm에서는 다음과 같은 명령을 사용하여 패키지를 관리할 수 있다. {% embed url="" %} npm cli command reference documentation {% endembed %} * 패키지 설치 - `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](https://www.npmjs.com/)을 이용하여 vue cli 3를 설치한다. {% embed url="" %} ```shell npm install --location=global @vue/cli ``` 설치 시 시스템 전역에서 사용 가능하도록 `--location=global` 옵션을 추가한다. ### Vue cli 3 설치 확인 설치가 완료되었다면 vue 명령을 사용할 수 있다. ```shell vue --version ``` ### Vue cli 명령 확인 `vue --help` 명령을 입력하면 vue cli에서 제공하는 명령을 확인할 수 있다. ```shell vue --help ``` ### Vue project 생성 다음 명령을 이용하여 첫 번째 프로젝트를 생성한다. ```shell vue create <애플리케이션이름> ``` 생성 과정에서 Vue 버전 선택 화면이 나오는데 Vue 3를 사용하도록 설정해야 한다.

이후 자동 설정이 계속 진행되어 프로젝트 생성이 종료된다. 과거에 비해 사용자가 입력해야 하는 정보들이 압도적으로 줄어들어 편하게 애플리케이션을 생성할 수 있다.

생성 완료 시 해당 프로젝트 폴더로 이동하여 스크립트를 실행하면 된다. 결과 화면에 나온 것처럼 `cd` 명령을 이용하여 폴더를 이동한다. 위 화면은 애플리케이션 이름이 `demo` 일 경우 나오는 화면이므로 본인 프로젝트 이름에 맞게 설정해야 한다. ```shell cd demo npm run serve ``` `npm run serve` 명령을 실행하면 개발 서버가 준비되며 다음과 같은 결과 화면이 나온다.

표시된 주소로 접속하면 정상적으로 만들어진 프로젝트 화면이 나온다.