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 vue 3 마이그레이션 전략은 Vue 3 호환성이되도록 구성 요소를 점진적으로 재 작성하십시오!
• Vue 3 앱에서 Vue 2 및 3 생태계를 확장하십시오 .

설치하다

npm i vue-2-3

? 빠른 설정

1. vue-2-3/to-vue-2 또는 vue-2-3/to-vue-3 가져 오기.

   • toVue2 사용하여 Vue 2 앱으로 3 구성 요소를 상호 작용하십시오.

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

   • toVue3 사용하여 Vue 3 앱으로 Vue 2 구성 요소를 상호 작용하십시오.

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

2. Bare Specifier vue 및 vue3 통해 VUE 2 & 3을 자동으로 해결하려고 시도하지만 찾을 수없는 경우 수동으로 등록 할 수 있습니다. 한 번만이 작업을 수행하면 앱의 상단에서 수행하도록 제안됩니다.

    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 )
       }
   }