开发者问题收集

如何将 anime.js 导入到我的 Vue 项目?

2018-03-13
5765

我有一个关于将 anime.js 导入我的 vue 项目的问题。我正在使用 vue cli。如何将 animejs 包含到我的项目中?我尝试了以下方法:

import anime from 'animejs'
Vue.use(anime);

但是我在控制台中收到一条错误消息:

Uncaught TypeError : a.hasOwnProperty is not a function. . .

你们能帮我吗?

3个回答

Vue.use() 仅用于为 Vue.js 设计的插件。您不能简单地在那里添加一个库,否则行不通。

我的建议是,您创建该插件并在您的项目中使用它,以使 anime.js 可在任何地方访问。

您可以这样做:

//vue-anime.js
import anime from 'animejs';

const VueAnime = {
  install (Vue, options) {
    Vue.prototype.$animeJS = anime;
  }
}

export default VueAnime

然后

import VueAnime from './vue-anime';
Vue.use(VueAnime);

现在每个 Vue 组件都能够使用 anime 访问 this.$animeJS

Phiter
2018-03-13

或者简单来说 -

import Vue from "vue";
import anime from 'animejs/lib/anime.min.js';

Vue.prototype.$anime = anime;

然后在所有组件中执行 this.$anime

Spotd
2019-09-17

@Phiter 的答案乍一看不错,但我无法在我的 vue-cli 3 环境中使用它。不过下面的代码可以工作,所以我认为它可能对你有用。这只是一种将外部库安装到 Vue 应用程序中并通过原型公开它的简单方法:

// animejs.js
import anime from 'animejs'

const install = (Vue, options) => {
    Vue.prototype.$animejs = anime
}

export default install

// Then, in your main.js (at least for me)
import VueAnime from './animejs'
Vue.use(VueAnime)

现在,当您需要访问该库时,只需在您的项目中使用 this.$animejs 即可。

adstwlearn
2018-06-20