nuxt vue2数字滚动效果

安装插件 npm install vue-count-to --save-dev

然后在plugins文件下新建一个vue-count-to.js文件，里面添加这段代码

import Vue from "vue"
import countTo from "vue-count-to"
Vue.component("countTo",countTo)

然后在nuxt.config.js中的plugins中注册一下countTo

  plugins: [
    '~/plugins/router.js',
    {
      src:"~/plugins/axios",
      ssr:true//服务器
    },
    {
      src:'~/plugins/element-ui.js',
      ssr:true,   //不支持ssr的插件只会在客户端运行不要给true
      // mode:'server'//client   //v2.4+
    },
    {
      src: '~plugins/vant.js', ssr: true
    },
    {
      src: '~plugins/main.js', ssr: true
    },
    {
      src: '@/plugins/vue-count-to',
      ssr: true
  }
  ],

然后在你需要的页面index.vue中

<div>
  <countTo :start-val="0" :end-val="20000" :duration="5000" style="font-size:30px;"  />
</div>

就可以实现页面的数字滚动了