有人得到Vue-洛蒂与Nuxt合作吗?我试图导入它作为Vue-洛蒂说:第一个月这上面说找不到包裹。然后我试了试Nuxt的做法:import Lottie from 'vue-lottie';这会给我一个“Unexpected token〈”错误。我错过了什么?
import Lottie from 'vue-lottie';
vddsk6oq1#
如果你想使用vue-lottie,你需要导入正确的lottie.vue组件,它位于node_modules文件夹中:
import Lottie from 'vue-lottie/src/lottie.vue'
希望能成功。
qxgroojn2#
我在VueJS应用程序中使用lottie-web而不是vue-lottie,我遇到了和你类似的问题。我让它工作的方法是用npm install lottie-web正常安装它,然后在我的组件中调用它:import lottie from 'lottie-web/build/player/lottie'; .也许您还必须以与vue-lottie相同的方式键入路径。
lottie-web
vue-lottie
npm install lottie-web
import lottie from 'lottie-web/build/player/lottie';
px9o7tmv3#
我使用lottie-web,只需使用npm -〉npm安装lottie-web或yarn -〉yarn添加lottie-web进行安装然后在plugin文件夹-〉plugins/lottie.js中创建一个文件,并添加以下代码:
import lottie from 'lottie-web'; export default ({ app }, inject) => { inject('lottie', lottie); };
最后在nuxt.config.js中注册它:
plugins: [{ src: '~/plugins/lottie', mode: 'client' }],
现在你可以在nuxt应用程序的任何地方使用lottiethis.$lottie。请看下面的代码片段,以帮助您入门:
<template> <div ref="animationElement" class="animation" @mouseover="open" @focus="open" @mouseleave="close" @blur="close" /> </template> <script> export default { mounted() { this.$lottie.loadAnimation({ container: this.$refs.animationElement, // the dom element that will contain the animation loop: false, autoplay: false, path: 'your_path/lottie.json', // the path to the animation json }) }, methods: { close() { this.$lottie.setSpeed(1) this.$lottie.setDirection(1) this.$lottie.play() }, open() { this.$lottie.setSpeed(1.5) this.$lottie.setDirection(-1) this.$lottie.play() }, }, } </script>
2j4z5cfb4#
import lottie from 'lottie-web'
应该可以
7lrncoxx5#
我为Nuxt 3和Composition API找到了一个可行的解决方案:
Nuxt 3
Composition API
不存在配置ts:
export default defineNuxtConfig({ plugins: [{ src: '~/plugins/lottie', mode: 'client' }], })
插件/lottie.js:
import lottie from 'lottie-web' export default defineNuxtPlugin((nuxtApp) => nuxtApp.provide('lottie', lottie))
组件值:
<script setup> const nuxtApp = useNuxtApp(); onMounted(() => { nuxtApp.$lottie.loadAnimation({ ... });
5条答案
按热度按时间vddsk6oq1#
如果你想使用vue-lottie,你需要导入正确的lottie.vue组件,它位于node_modules文件夹中:
希望能成功。
qxgroojn2#
我在VueJS应用程序中使用
lottie-web
而不是vue-lottie
,我遇到了和你类似的问题。我让它工作的方法是用
npm install lottie-web
正常安装它,然后在我的组件中调用它:import lottie from 'lottie-web/build/player/lottie';
.也许您还必须以与
vue-lottie
相同的方式键入路径。px9o7tmv3#
我使用lottie-web,只需使用npm -〉npm安装lottie-web或yarn -〉yarn添加lottie-web进行安装
然后在plugin文件夹-〉plugins/lottie.js中创建一个文件,并添加以下代码:
最后在nuxt.config.js中注册它:
现在你可以在nuxt应用程序的任何地方使用lottiethis.$lottie。
请看下面的代码片段,以帮助您入门:
2j4z5cfb4#
应该可以
7lrncoxx5#
我为
Nuxt 3
和Composition API
找到了一个可行的解决方案:不存在配置ts:
插件/lottie.js:
组件值: