在Vue 3项目开发中，数字滚动效果常常能为界面增添动态与吸引力，比如展示数据统计、倒计时等场景。借助countUp.js，我们可以轻松实现这一功能并封装成插件。

安装countUp.js。通过npm或yarn进行安装，在项目目录下执行命令：npm install countup.js 或 yarn add countup.js。

安装完成后，创建一个Vue 3插件。在src目录下新建一个文件夹，例如 plugins，然后在其中创建 countUpPlugin.js 文件。在该文件中，我们先引入countUp.js：import CountUp from 'countup.js';。接着定义一个插件对象，其中的 install 方法是Vue插件的核心：

export default {
    install(app) {
        app.directive('count-up', {
            mounted(el, binding) {
                const { startVal = 0, endVal, duration = 2, decimals = 0 } = binding.value;
                const countUp = new CountUp(el, startVal, endVal, decimals, duration);
                if (!countUp.error) {
                    countUp.start();
                } else {
                    console.error(countUp.error);
                }
            }
        });
    }
};

上述代码定义了一个名为 count-up 的指令。在指令的 mounted 钩子函数中，从 binding.value 中获取配置参数，如起始值 startVal、结束值 endVal、滚动持续时间 duration 和小数位数 decimals。然后创建一个CountUp实例并启动它。

接下来，在Vue 3项目中使用这个插件。在 main.js 中引入并安装插件：

import { createApp } from 'vue';
import countUpPlugin from './plugins/countUpPlugin';
import App from './App.vue';

const app = createApp(App);
app.use(countUpPlugin);
app.mount('#app');

最后，在组件模板中使用指令。例如：

<template>
    <div>
        <span v-count-up="{ startVal: 0, endVal: 100, duration: 3, decimals: 2 }"></span>
    </div>
</template>

<script setup>

</script>

这样，在页面渲染时，span 标签内的数字就会从0开始，在3秒内滚动到100，并且保留两位小数。通过这种方式，利用countUp.js结合Vue 3的指令系统，我们成功实现了数字滚动插件，为项目开发提供了实用的功能。