TypeScript를 사용하여 Vue Composition API를 사용하는 방법 - 1부

아시다시피 Vue 3에는 Composition API라는 새로운 기능이 있습니다. 이 시점에서 우리는 그것에 대해 알고 있다고 생각하지만 이러한 기능을 테스트하고 싶다면 지금 바로 사용할 수 있는 Vue 플러그인이 있습니다.

이 예에서는 다음 도구를 사용합니다.

뷰 2.6.10

VueCLI 4.0.5

타입스크립트 3.5.3

@vue/composition-api

좋아하는 코드 편집기(내 코드는 VS Code ❤)

이 튜토리얼부터 시작하겠습니다.

프로젝트 설정

VueCLI가 설치되어 있지 않은 경우 다음 명령을 사용하도록 진행했습니다.

npm i -g @vue/cli

이렇게 하면 이 자습서에서 사용하는 CLI가 설치되어 설치되어 있는지 확인합니다.

vue --version or vue -V

이것은 최신 빌드로 반환될 수 있습니다. 제 경우에는 4.0.5입니다.

이제 CLI가 설치되었으므로 원하는 디렉토리로 이동하여 다음 명령을 실행합니다.

vue create <give_any_name_you_want>

이렇게 하면 프로젝트 생성이 시작되지만 완료되기 전에 몇 가지 옵션을 선택해야 합니다.

명령을 입력한 직후 CLI는 사용할 사전 설정을 묻고 수동으로 기능 선택을 선택하고 Enter 키를 누릅니다.

그런 다음 몇 가지 옵션이 있는 메뉴가 표시됩니다. 스페이스 바를 눌러 다음 옵션을 선택하고 Enter 키를 누릅니다.


클래스 스타일 구성요소 구문을 사용하시겠습니까? (예/아니요) n
Typescript용 Vue 문서에 따르면 연은 이 방법 대신 Vue.extend 방법을 사용할 것을 권장하므로 No를 선택합니다.

TypeScript와 함께 Babel을 사용하시겠습니까? 와이
모든 브라우저에서 작동하려면 코드를 트랜스파일해야 합니다.

린터/포매터 구성 선택: 선호하는 것 중 하나를 선택합니다. 제 경우에는 ESLint + Standard입니다. 하지만 TSLint는 사용되지 않으므로 선택하지 마세요! ( https://medium.com/palantir/tslint-in-2019-1a144c2317a9 ).

추가 린트 기능:
저장 시 린트

Babel, Eslint 등의 구성을 배치하시겠습니까?
전용 구성 파일에서

설정을 저장하려면 Y를 누르고 이름을 지정하십시오. 이제 CLI가 모든 설치를 완료할 때까지 기다릴 수 있습니다. CLI가 폴더로 이동을 완료한 후 코딩을 시작하기 직전에 npm 종속성이 몇 개 더 필요합니다. 계속 진행해 보겠습니다.

npm i -S axios @vue/composition-api

설치가 완료되면 코드를 시작할 준비가 된 것입니다!

다음 부분에서는 Vue 앱에서 사용할 인터페이스와 서비스를 준비하고 코딩하므로 코딩할 준비를 하십시오!