Vue组件未加载插件语法

Question

我有一个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 warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供"；name"；选项

在中找到

--->位于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"/>

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

• 使用：git clone https://github.com/matteobruni/tsparticles.git --branch dev克隆tsParticlesdev分支
• 运行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语法，但没有任何更改，所以我恢复到以前的类代码。

Answer 1

插件文件应该导出一个带有install函数的对象，但您的插件只是导出函数本身。此外，install函数的参数应在主体中使用(即，Vue是参数名称，因此主体应包含Vue.component()(。

修复应该是这样的：

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