[JSライブラリ][新着情報][いいね][ブログ][フレーム編集][フォーム][データベース][スライドショー][ページ管理][サイト管理][グループ管理] vue.js 2 → 3にアップデート対応 OW-2521

[akagane99]

概要

• change: JSライブラリ, vue.js 2 → 3にアップデート対応
• change: 新着情報, vue.js 2 → 3にアップデート対応
• change: いいね, vue.js 2 → 3にアップデート対応
• change: ブログ＞表示条件, vue.js 2 → 3にアップデート対応
• change: フレーム編集＞公開設定, vue.js 2 → 3にアップデート対応
• change: フォーム＞フォーム設定＞採番イメージ, vue.js 2 → 3にアップデート対応
• change: データベース＞表示設定＞急上昇ワード, vue.js 2 → 3にアップデート対応
• change: スライドショー＞項目設定, vue.js 2 → 3にアップデート対応
• change: ページ管理＞ページ変更＞背景色、ヘッダーバーの背景色, vue.js 2 → 3にアップデート対応
• change: サイト管理＞サイト基本設定＞背景色、ヘッダーバーの背景色, vue.js 2 → 3にアップデート対応
• change: グループ管理＞グループ変更＞ユーザ参加, vue.js 2 → 3にアップデート対応
• delete: レイアウト＞app, vue.js 3で機能しなくなったためVue.config.devtools = trueを削除
  • vue.js 3 の DevTool利用
    • npm run dev で再ビルド+ Chrome拡張機能　でデバッグできました。
    • Installation | Vue DevTools
• 関連対応
  • add: JSライブラリ, day.jsを追加しました。

npmライブラリ コマンド

npm uninstall vue vue-template-compiler

npm i -D vue @vue/compiler-sfc
npm i -D dayjs

# ライブラリの最新化
npm update

# app.js, app.cssの最新化
npm run prod

※ vue-loader = 17使ってたので、作業不要
※ vue-template-compilerは、@vue/compiler-sfcに置き換わりました。
※ dayjsは、日付フォーマットのライブラリです。vueとの依存はありません。

対応中のみ @vue/compat を使いました

※ @vue/compatはVue 2 互換性ライブラリです。Vue 2とVue 3両方の書き方がほぼ使えます。

webpack.mix.js に追記

// @vue/compat（別名「移行ビルド」）は、設定可能な Vue 2 互換の動作を提供する、Vue 3 のビルドです。
mix.webpackConfig({
    resolve: {
        alias: {
            vue: '@vue/compat'
        }
    }
})

npmライブラリ コマンド(@vue/compat)

npm i -D @vue/compat

# app.js, app.cssの最新化
npm run prod

対応終わったらアンインストール

npm uninstall @vue/compat

# app.js, app.cssの最新化
npm run prod

github actionsで簡易テスト

• Laravel Dusk Connect-cms-test matrix · 3924e33
  https://github.com/opensource-workshop/connect-cms/actions/runs/14698904354
  • エラーなしを確認しました。

レビュー完了希望日

なし

関連Pull requests/Issues

なし

参考

• 移行
  • 移行ビルド | Vue 3 移行ガイド
    https://v3-migration.vuejs.org/ja/migration-build
  • Vue 3の新しい機能と変更点・全11件 – console dot log
    https://blog.capilano-fw.com/?p=6393#Vue
  • Vue2からVue3への移行手順 #Vue.js - Qiita
    https://qiita.com/taisei-ide-lyd/items/4bdfdf6cd9345001795b
  • Vue.js3でSFC（単一ファイルコンポーネント）を使う環境の構築 #npm - Qiita
    https://qiita.com/ison12/items/6b5b3e0d8338b3baac83
• Vue
  • 【Vue入門】@changeについて学ぼう | kamiblog
    https://god48.com/vue-change
  • イベントハンドリング | Vue.js
    https://ja.vuejs.org/guide/essentials/event-handling

    • 使い方は v-on:click="handler"、あるいは省略して @click="handler" として使用します。

• npm install -d と -D #Node.js - Qiita
  https://qiita.com/trapple/items/a8a91f9ba8d550c49ccf

  • -Dは--save-devの略

DB変更の有無

無し

チェックリスト

• (DB変更有りの場合) 移行プログラムに影響がない事を確認しました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-check-list---Migration
• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule