如何将 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