将 Js 插件迁移到 Vue

Question

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

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

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

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

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

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

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

}

这个实现的不好的部分是你需要向我们的组件添加一个数据属性。