Vue 组件未使用插件语法加载

Posted 2023-02-18

【中文标题】Vue 组件未使用插件语法加载

【英文标题】：Vue component not loaded with Plugin syntax

【发布时间】：2021-02-25 19:25:59

【问题描述】：

我的这个 Vue 插件不工作：

import _Vue from "vue";
import particles from "./Particles.vue";

const VueParticles = (Vue: typeof _Vue, options: unknown) => 
    _Vue.component('Particles', particles);
;

export  particles as ParticlesComponent ;
export default VueParticles;

它可以构建，但如果我尝试使用它，它不会加载组件并且应用程序会返回此错误：

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

发现于

---> 在 src/App.vue

我像这样加载插件：

import Particles from "particles.vue";

Vue.use(Particles);

但如果我使用Vue.component 语法加载组件，它就可以正常工作，如下所示：

import  ParticlesComponent  from "particles.vue";

Vue.component("Particles", ParticlesComponent);

这是我正在使用的模板：

<Particles id="tsparticles" :options="options" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded"/>

您可以尝试按照以下步骤复制问题：

克隆tsParticles dev 分支：git clone https://github.com/matteobruni/tsparticles.git --branch dev 运行yarn && npx lerna bootstrap && npx lerna run build 转到demo/vue 文件夹 运行yarn serve并打开http://localhost:8080，一切正常（动画背景应该开始动画） 编辑src/App.vue 评论工作Vue.component 并恢复Vue.use 重新运行yarn serve并打开http://localhost:8080，这次后台没有出现

我刚刚从 yarn 工作区切换到标准 yarn 以解决整个项目中节点依赖关系的大问题

我不明白它为什么会这样坏。

我还尝试了一个外部 Vue.js 应用程序，而不是项目内的演示应用程序，但没有任何改变。

该组件正在使用vue-property-decorator，但我尝试切换到Vue.extend 语法，但没有任何改变，所以我恢复到以前的类代码。

【问题讨论】：

你为什么用_Vue而不是Vue

只是一个类型，我改成Vue，变量名改成了vue，但是什么都没变

【参考方案1】：

plugin file should be exporting an object with an install function，但您的插件只是导出函数本身。此外，install 函数的参数应在主体中使用（即Vue 是参数名称，因此主体应包含Vue.component()）。

修复应该如下所示：

const VueParticles = 
  install(Vue: typeof _Vue, options: unknown) 
    Vue.component('Particles', particles);
  
;

export default VueParticles;

【讨论】：

使用dev 分支？

我解决了构建错误，但它在全新安装中不起作用。我尝试将 Vue 组件和演示文件夹从项目中复制出来，但如果我使用插件，也会出现同样的错误。

您的plugin code 仍然使用Vue 导入而不是vue 参数。

谢谢！！使用参数完全解决了它！