[Vue3.x]create를 사용하여 기존 프로젝트에 TypeScript 추가

abstract

Vue3.x 뒤에 Type Script를 추가하고 싶습니다.가급적 수월하다.
-> vue create에 추가됩니다.
-> 덮어쓰지 않으려는 파일도 덮어씁니다.
->git 이력서에서 차이를 지켜보면서 원하는 부분 복원
전제로 필자는 많은 수정을 하지 않았고 수정도 번거롭지 않았다.

하고 싶은 일

Vue3+JavaScript의 항목을 Vue3.x+TypeScript로 바꾸고 싶습니다.

수완

- 수동으로 Type Script 입력

$ npm i -D typescript ts-loader

웹 패키지 등을 수동으로 기술하는 방법.
귀찮아서 하기 싫어요.

-2. 다시 vue create 실행

같은 항목 이름이 있을 때, 뒤에서 옵션을 병합할 수 있습니다.
이렇게 하면 쉬울 것 같아요.
수단-2으로 해봐.

컨디션

$ vue --version
@vue/cli 4.5.11

$ node -v
v14.0.0

현재 항목은 다음과 같다.
./package.json

{
  // ...
  "dependencies": {
    "vue": "^3.0.0"
  },
  // ...
}

방법

merge project

$ create vue my-pj

기존 프로젝트와 동일한 디렉토리 이름을 설정합니다.
그 다음에 합병이냐 덮어쓰느냐는 질문을 받았다.
따라서 선택Merge.

? Target directory /Users/.../my-pj already exists. Pick an ac
tion: (Use arrow keys)
  Overwrite
❯ Merge
  Cancel

매뉴얼별로 선택

Manually select features를 선택합니다.

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features

Type Script 확인

TypeScript를 추가합니다.

? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Choose Vue version
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
❯◯ E2E Testing

이렇게 하면 됩니다.
같은 요령으로 다른 피처도 사용할 수 있다.
로터 등 다른 건 어려울 것 같은데😭

덮어쓴 파일 수정

메르지라고는 하지만 충돌을 일으킨 곳도 뒤덮였다.
지트 이력서를 보면서 원하는 코드를 추가해야 합니다.
개인적으로 수정한 서류 드릴게요.

App.vue

아래쪽에 변화가 있다.(Type Script에 가입하는 것은 당연합니다.)
App.vue

- <script>
+ <script lang="ts">

App.vue

- export default {
+ export default defineComponent({

main.ts

새로 만들기main.ts.main.js는 좋은 main.ts에 이식된 것이 아니기 때문에 스스로 다시 써야 한다.

shims-vue.제작ts

새로 추가되었습니다.
shims-vue.d.ts

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  cons　　　　　　　t component: DefineComponent<{}, {}, any>
  export default component
}

기타 파일

config 파일 등을 추가하거나 덮어썼습니다.
필자는 아이템을 하나 만들었는데 플러그인을 많이 쓰지 않아서 힘들지는 않았지만, 크게 고친 것은 힘들 것 같다.
(차이로 업로드된 파일들)

실행

$ yarn serve

문제 없이 집행하다.

총결산

방금 프로젝트를 하고 별로 가공하지 않았기 때문에 그렇게 어려운 일을 하지 않고 Type Script를 가져왔습니다.
정면 공격의 느낌이 없다.
그렇긴 하지만 CLI가 무엇을 기술했는지 차이점으로 볼 때 좋다.
(여기에 자세히 쓰여 있지 않다)