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

Question

我有一个关于将anime.js导入我的vue项目的问题。我正在使用vue cli。如何在项目中加入animejs？我这样试过：

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

但我在控制台中收到错误消息：

  

未捕获的TypeError ：a.hasOwnProperty不是函数。 。

你能帮助我吗？

Answer 1

Vue.use()仅用于为Vue.js设计的插件。你不能简单地在那里添加一个库，它不会起作用。

我的建议是你创建该插件并在你的项目中使用它来使anime.js无处不在。

你可以这样做：

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

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

export default VueAnime

之后

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

现在每个Vue组件都可以使用动画访问this.$animeJS。

Answer 2

@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。

Answer 3

或在npm install之后在main.js中简单地这样：

import anime from 'animejs';
Object.defineProperty(Vue.prototype, '$anime', { value: anime });

然后使用它。$ anime tu使用它。

Answer 4

或者简单地-

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

Vue.prototype.$anime = anime;

然后在所有组件中 this。$ anime

Answer 5

要在 Vue 3 项目中全局使用 AnimeJS，只需创建一个插件 (plugins/anime.js)：

import anime from 'animejs';

export default {
  install(app, options) {
    app.config.globalProperties.$anime = anime;
  },
};

然后包含它（main.js 或其他地方）：

import VueAnime from './plugins/anime';

createApp(App)
  .use(VueAnime)
  .mount('#app');

现在，您可以通过 this.$anime 随时随地访问它。

请注意，与之前的版本相比，installing the plugin for Vue 3 略有变化。