Vue2系のプロダクトをVue3へアップデート


![vue-js.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/f1ee202f-f6c4-8300-2597-5f84043de3bf.jpeg)

# 前書き
Vue 3のbeta版がリリースされてしばらく経ったし、
丁度手元にVue 3へアップデートしたいプロジェクトがありますので、手順を記録します。

# アップデートしたいプロジェクトを軽く紹介
<img width="618" alt="キャプチャ1.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/3451aab2-3e1d-de1c-63f8-03ef11251994.png"><img width="271" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/237cb9dd-f2bd-ad5f-46fc-25ca507102b6.png">

|                  |バージョン          | 
|:-----------------|------------------:|
| vue              |      2.6.11       |   
|  typescript      |    3.7.5          |  

剣盾ランクバトルにハマった頃作りかけたものです。

# Vue Cliの更新

古いVueCliが入ってる場合、先ずは削除します。

```
$ npm uninstall vue-cli -g
```
最新のvue-cliをインストール。

```
$ npm install @vue/cli -g
```
インストール後のバージョンを確認します。

```
$ vue -V
@vue/cli 4.4.6
```
#Vueプロジェクトのアップデート

非常に簡単です、下記のコマンドを実行します。

```
$ cd [プロジェクトのpath]
$ vue add vue-next
```
実行後、既存の依存パッケージは更新される、また一部の文法も修正されました。

アップデート完了後、`package.json`の中身を見てみます。

```json:package.json
  "dependencies": {
    ...
    "vue": "^3.0.0-beta.1",
    "vue-router": "^4.0.0-alpha.6",
    "vuex": "^4.0.0-alpha.1"
  },
```
`vue`、`vue-router`、`vuex`が更新されたようです。
# プロジェクトを実行します。

```
$ cd [プロジェクトのpath]
$ npm run serve
```

ブラウザを開いて`http://localhost:8080/login`にアクセスすると、画面が真っ白です、
コンソールに以下のエラーが表示されてます。
<img width="907" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/5934dce3-b15d-0a1d-edbc-40a75366bc7d.png">

調べたら、Vue2系で使用していた関数がいくつか廃止されて、また、型の定義を漏れていたので、直していきます。

### shims-vue.d.ts

先ずはタイプの宣言ファイルから修正してきます。
修正前。

```ts:shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
```
修正後。

```ts:shims-vue.d.ts

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const component: ComponentOptions;
    export default component
}
```

### .vueのscriptブロック

Vue2系では以下のように書きます。

```vue
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import NavFooter from "@/components/NavFooter.vue";
import LoginFormSlot from "@/components/LoginFormSlot.vue";

@Component({
    components: {
      NavFooter,
      LoginFormSlot 
    }
})
export default class Login extends Vue{
   constructor() {
       super();
   }
    @Provide() password:string = '';
    @Provide() email:string = '';
    @Provide() showForm:boolean = true;
    formChange(e:any) {
        let type:string = e.toElement.innerText;
        if (type == '新規登録'){
            this.showForm = false
        } else {
            this.showForm = true
        }
    }
}]
</script>
```

Vue3の記述方に直すと下記のようになります。

```vue
<script lang="ts">
import NavFooter from "@/components/NavFooter.vue";
import LoginFormSlot from "@/components/LoginFormSlot.vue";
import { defineComponent } from "vue"

const Login = defineComponent({
    setup(){
     let showForm = true;
     const formDate = {
       email: "",
       password: "",
     };
     const formChange = (e:any)=>{
        let type:string = e.toElement.innerText;
        if (type == '新規登録'){
            showForm = false
        } else {
            showForm = true
        }
     };
     components: {
       NavFooter,
       LoginFormSlot
     }
     return {
       showForm,
       formChange
     }
    },
});
export default Login
</script>
```
### template
Vue2系では以下のような記述も廃止されました。

```vue
<template>
 <div>
    ...
    {{this.xxx}}
    ...
 </div>
</template>
```
修正後。

```vue
<template>
 <div>
    ...
    {{xxx}}
    ...
 </div>
</template>
```

再度ページを読み込みします。
<img width="637" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/e8e0dd80-f787-5d15-3152-851c2d708d51.png">
表示はうまくいきました、コンソールにエラーもありません。