はじめに
前回、compositon-api化を行ったので、最後にVue3へ完全移行した。
主に以下のライブラリを更新し、各ライブラリの更新手順書を参考にしながら、対応していった。
package.json
(dependencies)
- "element-ui": "^2.13.0",
- "vue": "^2.7.0",
- "vue-router": "^3.6.5",
- "vuex": "^3.1.3",
+ "element-plus": "^2.3.6",
+ "vue": "^3.3.4",
+ "vue-router": "^4.2.2",
+ "vuex": "^4.1.0",
(devDependencies)
-"sass": "^1.26.3",
- "webpack": "^4.42.1"
- "eslint": "7.32.0",
- "eslint-plugin-vue": "^7",
+ "sass": "^1.63.4",
+ "webpack": "^5.87.0"
+ "eslint": "^8.42.0",
+ "eslint-plugin-vue": "^9.14.1",
+ "core-js": "^3.31.0",
Vueの更新
- 基本的には、Vueの移行ガイド通りに実施する。
- vue/compat を入れることで、Vue2系とVue3系の構文が併用できる。
- Vue2系の構文はワーニングでるので、基本的にはその対応を行う。
- 破壊的変更が主な修正対象
vueRouter
- vueと同様に破壊的変更を確認し、対処する
-
今回、vueRouterの破壊的変更や、型定義の変更が多くあり、修正に時間がかかった。
-
以下、対応の一部。
-
アスタリスクによる全パス指定はできなくなり、かわりに正規表現で指定する
route.ts
- { path: '*', ...}
+ { path: '/:pathMatch(.*)*', ..:}
- paramsの受け渡し方法が変更になり、パスにパラメータを含めることが必須となった。
- post的な使い方で、オブジェクトを受け渡していたため、一律queryパラメータへの変更した。URLが長くなってしまったが、一番影響が少ない方法がこれだった。
-
JSON.stringfy ⇔ JSON.parseでオブジェクトと文字列の変換も必要であった。
vuex
- そのまま続投できるらしい。(pinia推奨だが）
- vuex3→4へ上げる際は若干の破壊的変更があるのでその対応
Vue-cli × Webpack5
- vue-cliとwebpackを5系に上げた。
- core-jsモジュールのエラーが出るので、素直にcore-jsを入れた。
eslint
- vue3系のpluginを設定する
.eslintrc.js
- extends: ['plugin:vue/strongly-recommended', '@vue/typescript/recommended', '@vue/prettier'],
+ extends: ['plugin:vue/vue3-strongly-recommended', '@vue/typescript/recommended', '@vue/prettier'],
- その後、
yarn vue-cli-service lint --fixのlint自動修正で、slot構文や、sync構文の書き換えをしてくれる。
elment-uiをelment-plusへ
- el-input に値を入力できない。v-modelが機能してなさそう
- vue/compatが原因だった。comatを入れると、vue2系でコンパイルされてしまうらしい。
- 以下の対応で、vue3系でコンパイルされ動くようになったが、画面が動くようになったら早々に
vue/compatは外したほうが良かったかも。
main.ts
import { ElInput } from 'element-plus'
ElInput.compatConfig = { MODE: 3 }
- el-buttonのレイアウトが崩れている。
- 高さ32pxが指定されてたのが原因だった。styleで上書きしてやる必要がある。
index.scss
.el-button {
height: auto;
}
- 他にも、v-formのrulusの型定義や、date-pickerのフォーマット指定がdayjs準拠になったこと、スタイルの違いなどを確認して治していった。
所感
作業手順的には各ライブラリ毎に、概ね以下を行っていった。
- 公式ドキュメントのマイグレーションの項を確認し修正。
- コンソールやターミナルにエラーが出るので調査。大体がバージョン起因のものなので、参考にするのは公式を優先
- 公式ドキュメント、またはgithubの
changelogページを確認し、Breaking Changeを対応する - ほとんどがそれでOKだった。
- 公式ドキュメント、またはgithubの