Vue CLI로 프로젝트 생성

먼저 npm을 이용하여 vue-cli를 설치합니다.

현재 기준으로 vue-cli는 4.5.x 버전 입니다.

vue-cli 4.5.x 버전 기준으로 프로젝트를 생성하겠습니다.

vue-cli 설치

npm install -g @vue/cli

 

설치 확인

vue -V

vue --version

프로젝트 생성

vue create hello-world

Default ([Vue 2] babel, eslint)를 선택합니다. 현재 vue3가 나왔지만 언제나 그랬듯 사용하려면 기다림의 시간이 필요합니다.

npm에서 프로젝트에 필요한 패키지들을 다운 및 인스톨까지 같이 진행되기 때문에, 약간의 시간이 걸립니다.

 

프로젝트 설치 확인 (로그)

 

로그상의 명령어를 실행해 봅시다.

 

cd hello-world //생성된 프로젝트로 이동

npm run serve

npm run serve를 실행하게 되면 npm의 커스텀 명령어(serve)가 실행됩니다.

해당 명령어의 정의는 프로젝트 폴더 내의 package.json의 "scripts"부분에 명시되어 있습니다.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  ...... 이하 생략

해당 명령어를 실행하게 되면 vue 웹 서비스가 실행이 되고 로그상에 접근할 수 있는 url 정보가 출력됩니다.

url로 접근하게 되면 vue로 작성된 페이지를 확인할 수 있습니다.

 

참고

cli.vuejs.org/guide/creating-a-project.html#vue-create