# 01. vue-cli 알아보기

## VUE CLI 란?

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.

> **여기서 CLI 란 ?**
>
> **명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스**는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. (위키백과)

vue-cli 에 대한 정보는 [여기](https://cli.vuejs.org/) 에서 확인 가능합니다.

### VUE-CLI 설치해보기

npm 또는 yarn 이 설치되어 있어야 합니다.

```bash
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```

설치 후 아래 명령어를 입력하였을 때 vue 의 version 이 나온다면 정상설치 된 것 입니다.

```bash
vue --version // 3.4.0
```

### VUE-CLI 로 프로젝트 생성해보기 

프로젝트 생성 명령어는 아래와 같습니다.

```bash
vue create 프로젝트명 
```

저는 hello-vue 라는 이름으로 프로젝트를 생성하겠습니다.

```
vue create hello-vue
```

위 명령어를 입력하셨다면 아래와 같은 선택지가 주어집니다. (memopad 는 이미 제가 구성한 환경이 있기 때문에 뜬 것 입니다 무시해주세요)\
기본적으로 default (babel, eslint) 가 주어지고 Manually 라는 여러 필요 라이브러리를 선택할 수 있는 두 가지의 선택지가 주어집니다.

![vue-cli 의 기본적인 두 가지의 선택지](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LYHGiMb-Vvl9E70fKQ5%2F-LYHKzn5mtYDbW2enjPE%2Fimage.png?alt=media\&token=c0e019ce-a2df-488c-a4b8-8a66de25c84b)

우리는 일단 default 를 사용할 것 이지만 Manually 에 무엇이 있는지 살펴만 보고 가겠습니다.

![Manually 를 선택했을 때 볼 수 있는 화면 ](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LYHGiMb-Vvl9E70fKQ5%2F-LYHLOKBziDk3A2R7H3j%2Fimage.png?alt=media\&token=c45ebd2a-dff8-4692-91a5-df4cff5a1298)

[Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [PWA](https://developers.google.com/web/progressive-web-apps/), [Router](https://router.vuejs.org/kr/), [Vuex](https://vuex.vuejs.org/kr/), [CSS Pre-processors](https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus), [Linter](https://eslint.org/) / [Formatter](https://github.com/prettier/prettier), [Unit Testing](https://jestjs.io/), [E2E Testing](https://www.cypress.io/) 등 필요한 라이브러리와 설정들을 추가할 수 있습니다.

default 를 선택하셔서 vue 프로젝트를 생성해주세요

![default 프로젝트 생성](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LYKsIUOyReY3IcJ9VX7%2F-LYLIjlU4vLdyYtWe3HI%2Fimage.png?alt=media\&token=464a2db8-f3e2-4b8e-a67c-c5d710e64b49)

프로젝트 생성후 해당 프로젝트 폴더로 이동하신 후 명령어를 이용하여 dev 서버를 실행해주세요

```bash
cd hello-vue
npm run serve
```

[localhost:8080](http://localhost:8080/) 으로 접속해주세요 아래와 같은 화면이 나온다면 성공입니다 :)

![main page](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LYLO6SX1LoASoJ_c7t2%2F-LYLO86tTeBfSyZbguUB%2Fimage.png?alt=media\&token=e2c62d7c-3639-4bd2-97a2-02e284aa02e6)

### 부록

혹시 **npm run serve** 시 아래와 에러가 뜨신다면 **package.json** 에 아래의 코드를 추가하시고 **npm install** 을 실행해 주시고 다시 **npm run serve** 를 해주시면 됩니다.

```javascript
"resolutions": {
  "ajv": "6.5.5"
},
"dependencies": {
  "ajv": "6.8.1",
},
```

![](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LYLOWdB4ten8JZz4Xtu%2F-LYLOdGE1C3Cra2axTQ2%2Fimage.png?alt=media\&token=c79b60f7-488c-4648-8e7d-01ee2d3ac959)

[참고](https://github.com/vuejs/vue-cli/issues/3441): 일시적인 이슈로 보입니다 :)