将 Js 插件迁移到 Vue答案

【问题标题】：Migrating Js plugins to Vue将 Js 插件迁移到 Vue
【发布时间】：2021-09-21 16:02:57
【问题描述】：

所以我有一个呈现一些 HTML 的 PHP 应用程序，为了在网站上提供交互性，我们有一些 js 插件可以使用一些选择器进行实例化并完成它们的工作（生成表单、加载视频等）。

现在我正在尝试将这些插件移至 Vue 3，但在获取正确方法方面存在一些问题。

我最初的方法是注册我的组件并在父级上挂载一个 vue 实例，该实例将环绕我网站上的所有内容（包括静态生成的 HTML + 我的新 vue 组件）。但是这种方法不起作用，因为 vue 只会删除该包装器中的所有内容。

让我的组件与我的静态 HTML 一起工作的唯一方法是在我的组件周围添加一个包装器元素，并为页面上的每个组件安装一个新的 Vue 实例，如下所示：

<div data-vue-component="">
   <foo-component/>
</div>

有没有办法避免这样做？理想情况下，我希望页面上只有一个实例，并且只使用静态 HTML 旁边的组件。

【问题讨论】：

标签： javascript php vue.js vuejs2

【解决方案1】：

所以...这根本不是问题。

简单的解决方法是在创建实例并删除 $mount('#selector') 调用时提供 el: '#selector' 属性。

所以我的代码变成了

Vue.component('test-button', () => import('../vue-components/TestButton'))
Vue.component('test-component', () => import('../vue-components/TestComponent'))

const instance = new Vue({
   el: '.wrap'
})

现在我可以使用 2 个测试组件，而无需为每个组件创建一个新实例。

由于我不知道页面是否有插件，所以我创建了一个使用动态导入延迟加载 Vue 的类：

export class VueInitializer {
   static init () {
    const vueComponents = document.querySelector('[data-vue-component]')

    if (!vueComponents) {
        return
    }

    const vue = () => import('vue')


    vue().then((module) => {
        const Vue = module.default

        //lazy load la all components
        Vue.component('test-button', () => import('../vue-components/TestButton'))
        Vue.component('test-component', () => import('../vue-components/TestComponent'))
        const instance = new Vue({
            el: '.wrap'
        })
    })
}

}

这个实现的坏处是您需要向我们的组件添加一个数据属性。

【讨论】：