vue 2 3

Vue-2-3

Vue 3アプリを備えたInterop Vue 2コンポーネントとその逆！

 < template >
    I'm a Vue 3 app... but I can use Vue 2 components!

    < some-vue2-component />
</ template >

< script >
import SomeVue2Component from 'some-vue2-component'
import toVue3 from 'vue-2-3/to-vue-3'

export default {
    components : {
        SomeVue2Component : toVue3 ( SomeVue2Component )
    }
}
</ script >

VUE 3アプリのVUE 2コンポーネントを使用したCodePenデモです。

？‍♂§なぜ？

• smooth smooth vue 3移行戦略コンポーネントを徐々に書き直して、VUE 3互換性を持っています！
• VUE 2と3のエコシステムを拡張して、 Vue 3アプリから広大なVUE 2エコシステムをタップして、その逆も！

インストール

npm i vue-2-3

？クイックセットアップ

1. vue-2-3/to-vue-2またはvue-2-3/to-vue-3をインポートします。

   • toVue2を使用してVUE 2の3つのコンポーネントを相互作用します2アプリ

      import toVue2 from 'vue-2-3/to-vue-2' ;

   • toVue3を使用してVue 3アプリを使用して2つのコンポーネントを相互作用します。

      import toVue3 from 'vue-2-3/to-vue-3' ;

2. Vue 2＆3をvue ＆3を自動的に解決しようとします。Vueおよびvue3は見つからない場合は、手動で登録できます。これを1回だけ行う必要があるため、アプリの上部で行うことが提案されています。

    import Vue2 from 'vue2' ;
   import * as Vue3 from 'vue@next' ;
   
   toVue2 . register ( Vue2 , Vue3 ) ;

   VUE 3の場合、依存関係を最小限に抑えるために、必要なエクスポートcreateAppとhを提供できます。

    import { createApp , h } from 'vue@next' ;
   
   toVue2 . register ( { createApp , h } ) ;

3. コンポーネントを渡して使用を開始します！

    import SomeVue2Component from './some-vue2-component' ;
   
   export default {
       components : {
           SomeVue2Component : toVue3 ( SomeVue2Component )
       }
   }