Question

我很难在Nuxt.js中添加插件。我一直在寻找文档和所有类似的问题，但是却遇到了相同的错误：simpleParallax is not defined。

我对所有文件尝试了不同的方法

nuxt.config.js：

plugins: [
     {src: '~/plugins/simple-parallax.js', mode:'client', ssr: false} 
],

plugins/simple-parallax.js：

import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);

index.vue：

Export default {

     plugins: ['@/plugins/simple-parallax.js'],
     mounted() {
        var image = document.getElementsByClassName('hero');
        new simpleParallax(image, {
            scale: 1.8
        });
    }
}

错误消息：

ReferenceError：未定义simpleParallax。

Answer 1

到目前为止，我发现的最佳解决方案是在 Vue simpleParallax 上注册 prototype，就像在名为 simple-parallax.client.js 的插件 nuxt 文件中一样：

import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;

还有我的 nuxt.config.js 文件，如果有人也想验证一下：

plugins: [
  {src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],

然后，我可以在主组件或根组件的 mounted 生命周期中的实例化之前访问插件，以获取所需的 HTML 元素并使用新添加的全局方法 {{1 }}

例如，我可以像这样初始化某个 HTML 元素以使其具有视差：

this.$simpleParallax

Answer 2

实际上，您不需要在这里使用插件。只需import simpleParallax from 'simple-parallax-js'在您的组件中，然后将其与您的图片一起放在mounted挂钩中即可。

index.vue：

import simpleParallax from 'simple-parallax-js'

export default {
  ...
  mounted() {
    // make sure this runs on client-side only
    if (process.client) {
      var image = document.getElementsByClassName('thumbnail')
      new simpleParallax(image)
    }
  },
  ...
}

别忘了删除以前创建的插件，这里是多余的。

插件未在instance.vue中定义

2 个答案: