01. vue-cli 알아보기

vue project 환경에 대해서 학습합니다.

VUE CLI 란?

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

여기서 CLI 란 ?

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

vue-cli 에 대한 정보는 여기 에서 확인 가능합니다.

VUE-CLI 설치해보기

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

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

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

vue --version // 3.4.0

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

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

vue create 프로젝트명 

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

vue create hello-vue

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

vue-cli 의 기본적인 두 가지의 선택지

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

Manually 를 선택했을 때 볼 수 있는 화면

Babel, TypeScript, PWA, Router, Vuex, CSS Pre-processors, Linter / Formatter, Unit Testing, E2E Testing 등 필요한 라이브러리와 설정들을 추가할 수 있습니다.

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

default 프로젝트 생성

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

cd hello-vue
npm run serve

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

main page

부록

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

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

참고: 일시적인 이슈로 보입니다 :)