vue-countTo不兼容vue3解决方案

@小朱呀路

已于 2023-01-24 23:21:29 修改

阅读量970

点赞数

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2023-01-24 23:08:41 首次发布

本文链接：https://blog.csdn.net/weixin_45441173/article/details/128758778

版权

31 篇文章 2 订阅

订阅专栏

文章介绍了如何在Vue2和Vue3中使用vue-count-to插件来创建数值增长的过渡动画。在Vue2中，通过npm安装后在main.js全局注册；在Vue3中，需手动引入组件文件并注册。同时，提到了如果存在eslint错误，需要按照提示处理。

摘要由CSDN通过智能技术生成

我们想要做一个数值增长的过度效果可以使用vue-count-to
官网的地址：https://www.npmjs.com/package/vue-count-to
官网的截图
在这里插入图片描述

vue2的使用方式

  cnpm  install -S vue-count-to

在main.js

import vueCountTo from "vue-count-to";
Vue.component("CountTo", VueCountTo)

组件文件使用

   <count-to :startVal="0" :endVal="2017" :duration="4000"></count-to>

vue3的使用方式
把上面的安装命令下载的node_modules的文件进行复制到自己的components文件下
在这里插入图片描述
放到自己的组件文件夹

main.js使用

import VueCountTo from "./components/VueCountTo/vue-countTo"; 
createApp(App).component("CountTo", VueCountTo).mount("#app");

(记得把package.json文件下的依赖删除)
在这里插入图片描述
组件文件使用

   <count-to :startVal="0" :endVal="2017" :duration="4000"></count-to>

提示：如果你的代码安装了eslint的话可能会报错那就根据提示进行加注释进行解决
在这里插入图片描述