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

【问题标题】：How to import anime.js to my Vue project?如何将anime.js 导入我的Vue 项目？
【发布时间】：2018-03-13 14:08:43
【问题描述】：

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

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

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

Uncaught TypeError：a.hasOwnProperty 不是函数。 . .

你们能帮帮我吗？

【问题讨论】：

Vue.use() 仅用于为 Vue.js 设计的插件。你不能就这样把它扔在那里。
你能帮我解决这个问题吗？我必须在每个组件上导入animejs吗？可能有更好的方法吧？
是的，你必须在每个使用它的组件中导入它。
或者你可以创建一个 Vue.js 插件然后你就可以使用Vue.use()。以下是创建插件的方法：vuejs.org/v2/guide/plugins.html
我明白了。我还没有接触到 vue 插件。当我了解更多信息时，也许我会遇到这个问题。

标签： vue.js anime.js

【解决方案1】：

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 组件都可以使用动画访问 this.$animeJS。

【讨论】：

嗨！试过上面的代码。但是为什么当我在其中一个组件中使用 console.log(this.$animeJS) 时会出现未定义？
这取决于很多东西。这主要取决于您的项目的外观。我的代码是您需要做的事情的基础。
你能检查我的代码吗？ github.com/ilbrigz/Vue-vue 。还是个新手，还在苦苦挣扎。我有时真的需要一些帮助，否则我最终会留下未解决的问题

【解决方案2】：

或者简单地说-

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

Vue.prototype.$anime = anime;

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

那就用这个吧。$anime你用它吧。

【讨论】：

【解决方案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。

【讨论】：