vue.js - 常规 NPM 包在 Vue.js 应用程序中不起作用

Question

我正在尝试使用 NPM 包 scroll-ease-efficient在我的 Nuxt/Vue 应用程序中，所以我在 plugins 中创建了一个名为 scroll-ease-efficient.client.js 的文件/ 我在 nuxt.config.js 文件的 plugins 部分指定的文件夹。

文件内容如下:

import Vue from 'vue'
import { scrollTo } from 'scroll-ease-efficient'
Vue.use(scrollTo)

然后在我的应用程序中，我只需执行以下操作:

const scrollEle = document.getElementById('element')
scrollTo(scrollEle, 500)

这应该可以，但它什么也没做，而且我也没有控制台错误。

怎么了？

Answer 1

谢谢提问。但首先，让我澄清一下。并非所有 npm 包都旨在使用 Vue/Nuxt 插件方法安装。这种方式的常规 npm 包名称通常包含单词 vue/nuxt，例如 Vuetify 或 Vuefire。

scroll-ease-efficient 包既不是 vue 也不是 nuxt 插件。因此，为了使用这个包，您可以将该包中的全局 api 添加到 vue 或 nuxt 构造函数中。

import Vue from "vue";
import { scrollTo } from "scroll-ease-efficient";

Vue.prototype.$scrollTo = scrollTo;

现在可以通过this.$scrollTo()访问全局方法

---

编辑

请查看此链接以获取演示:https://codesandbox.io/s/vue-scroll-ease-efficient-demo-8tqmj