将 Js 插件迁移到 Vue

Posted 2023-02-16

【中文标题】将 Js 插件迁移到 Vue

【英文标题】：Migrating Js plugins to 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 旁边的组件。

【参考方案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'
        )
    )

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