如何将第三方插件导入Nuxt并在挂载钩子中初始化？

Question

在Nuxt中使用第三方插件的正确方法是什么？我查阅了Nuxt插件文档，但它不适合我。

让我解释一下：

我试图使用一个名为JavaScript的阿诺映像注释库和Annotorious状态来使用插件，如下所示：

import { Annotorious } from '@recogito/annotorious';

const anno = new Annotorious({ image: 'hallstatt' }); // image element or ID

我创建了一个名为annotorious.client.js的插件，并将它放在我的plugins文件夹中：

plugins/notorious.client.js

import Vue from 'vue'
import Annotorious from '@recogito/annotorious'
Vue.use(Annotorious) <-- am I supposed to be doing it like this?

然后，在nuxt.config.js文件中我添加了：

plugins: ['~/plugins/annotorious.client.js']。

然后，在我的Nuxt页面中，我尝试像这样初始化插件：

<template>
...snip...
    <img :id="photo.filename" :src="photo.url" />
...snip...
</template>

<script>
    import Annotorious from '~/plugins/annotorious.client.js'
    export default {
      data() {
        return {
          photo: {},
          anno: {}
        }
      },
      async mounted() {
        await this.getPhoto()
        this.anno = new Annotorious({ image: this.photo.filename })

注意:在一个普通的Vue应用程序(用Vue-Cli构建)中，一切都很好。然而，一旦我尝试使用Nuxt，我就会遇到问题。这里有一个控制台错误：

vue.runtime.esm.js?2b0e:5106 Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
    at eval (annotorious.client.js?8beb:3)
    at Module../plugins/annotorious.client.js (default~app.js:4509)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (index.js:46)
    at Module../.nuxt/index.js (default~app.js:203)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at Module.eval (client.js:49)

有人在我的密码里发现什么了吗？怎样才能让这件事奏效？我会吐出一个密码箱，但他们的努克斯特启动是坏的。谢谢你的帮助！！

Answer 1

我只是快速地设置了一个新的nuxt项目，而简单的方法这里就是不起作用。

所以我试着像这样注射：

plugins > annotorious.js

import { Annotorious } from '@recogito/annotorious';

export default (context, inject) => {
    const initAnnotorious = (id) => new Annotorious({ image: id });
    inject('initAnnotorious', initAnnotorious)
    // For Nuxt <= 2.12, also add 
    context.$initAnnotorious = initAnnotorious
}

在你的nuxt.config.js里

plugins: [
    { src: '~/plugins/annotorious.js', mode: 'client' },
  ]

然后在你的部分：

<template>
    <img id="hallstatt" src="https://www.howtogeek.com/wp-content/uploads/2017/03/xwpv_top-650x363.png.pagespeed.gp+jp+jw+pj+ws+js+rj+rp+rw+ri+cp+md.ic.1-Of_zmw5H.png" alt="">
</template>

<script>
export default {
  mounted() {
    var anno = this.$initAnnotorious("hallstatt");
    console.log(anno)    
  }
}
</script>

您可以阅读有关此方法的更多信息这里。

希望这会有帮助！)

Answer 2

它看起来像一个臭名昭著的是而不是一个Vue插件，所以你不应该使用Vue.use(Annotorious)。

获得Uncaught TypeError: Cannot read property 'install'的原因是Vue试图调用传递给Vue.use的对象上的install函数。

试着导入组件中臭名昭著的内容并使用它。还可以在mounted钩子中导入，以防库使用服务器上未定义的函数对象。