現在、ASP.NET Coreのcshtml中で利用しているVue2のコードを、Vue3でも動作するようにとりあえず移行した際のメモです。
前提
- 移行元のソース（Vue2）はOptions APIで書かれています。
- Vue3に移行する際にはComposition APIに置き換えたりせず、そのまま動作させます。
- 単一ファイルコンポーネント（.vue）ではなく、ピュアJavaScriptで動作させます。
- SPAではなく、cshtml単位でページ遷移する通常のWebアプリケーションです。
- Vueは現在、CDNからscriptタグで読み込んでいます。
ライブラリのロード（CDNを使ったscriptタグでのロード）
下記はdevelopment用のファイル。production版を使いたい場合は vue.global.prod.min.js を参照。
※production版にすると余計なデバッグ情報が出力されないため、若干パフォーマンスが向上する。
(旧)
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
(新)
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.10/dist/vue.global.min.js"></script>
ESM(ECMA Script Module)形式でのロード
ESM形式でimportしたい場合には、次のように書くこともできます。
(新)
<script type="module">
import * as Vue from 'https://cdn.jsdelivr.net/npm/vue@3.3.10/dist/vue.esm-browser.min.js';
</script>
Vue初期化コード
(Vue2 + Options API)
const app = new Vue({
el: "#vue_app",
data: {
prop1: "hoge",
},
// メソッド群
methods: {
},
// マウント時処理
mount : {
}
});
(Vue3 + Options API)
// VueグローバルオブジェクトからcreateAppメソッドをインポート
const { createApp } = Vue;
// createAppの呼び出し
const app = createApp({
data() {
return {
prop1: "hoge",
}
},
// メソッド群
methods: {
},
// マウント時処理
mount : {
}
}).mount("#vue_app"); // DOMにマウント