vue-cli v4.5.0을 사용하여 Vue 3 프로젝트 만들기

소개

어제 (7/24)에 vue-cli v4.5.0이 출시되었습니다.
이렇게하면 vue-cli에서 한 번에 Vue 3 프로젝트를 만들 수 있습니다.
(지금까지는 Vue 2 프로젝트를 만든 후에 Vue 3으로 업그레이드해야했습니다.)

바로 프로젝트 작성부터 시작까지 가자.

사용법

1. 최신 @vue/cli 전역 설치

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

이미 프로젝트가 있는 경우 대상 프로젝트를 업그레이드합니다.

vue upgrade --next

2. create 시 Vue 3 를 선택한다

vue create <project-name>

# Vue 3 のpresetを使用する場合
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

# マニュアルで選択する場合
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with
  2.x
❯ 3.x (Preview)

물론 vue ui 에서 선택할 수도 있습니다.

설치 후 package.json를 보면 vue 3.0 또는 vuex4.0이 설치되어 있음을 알 수 있습니다.
(무려, -beta가 빠져 있습니다!!)

  "dependencies": {
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },

3. 시작

익숙한 화면이 시작됩니다.

cd <project-name>
yarn serve

마지막으로

시작 시 오류 가 나오는 등 불안정하지만 CLI 에서 Vue 3 의 프로젝트를 간단하게 만들 수 있게 되었습니다.
8월 초순의 Vue 3 정식 릴리스에의 기대도 높아지네요.