Vue3粒子库只有背景没有粒子效果

今天做后台管理模块项目的时候，在创建好路由之后，想制作一个比较高大上的东西，于是就想到了粒子库，粒子库也可以在GitHub中找，但是奈何现在很多人可能打不开，也可以在npm库里面找，npm库的网址是npmjs.com,然后当我下载好包的时候配置好之后，发现只有背景没有粒子效果，真的令人头大，一瞬间阻挡住了前进的脚步，我花费了3个小时的时间，终于找到了解决办法，下面给大家说出来(可能并不专业，见谅)

其实我也查了很多原因，有的说是没有安装什么什么包的我试过了没有用。但是查到了一个博客的文章说是版本过低，因为现在在npm库里老的版本的粒子库已经被弃用了，更新了新的版本@tsparticles/vue3是3.0.0的，但是这些版本都太高了，根本实现不了效果

解决办法

1.下载低版本的vue3-particles

npm install vue3-particles@^1.43.1

安装成功过后我们就可以进行引入

2.注意引入后还需要在下方注册一下

impor是引入，下面的.user(Particles)是注册，注意这两个不能缺少。

3.引入之后，需要打开我们的登录文件(Login.vue)中，去配置我们的particles

<template>
    <div>
        <Particles id="tsparticles" :options="options" />

    </div>
</template>

<script setup>

const handleLogin = () => {
    localStorage.setItem("token", "JJ")
};
//配置particles
const options = {
    background: {
        color: {
            value: '#0d47a1',
        },
    },
    fpsLimit: 120,
    interactivity: {
        events: {
            onClick: {
                enable: true,
                mode: 'push',
            },
            onHover: {
                enable: true,
                mode: 'repulse',
            },
            resize: true,
        },
        modes: {
            bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
            },
            push: {
                quantity: 4,
            },
            repulse: {
                distance: 200,
                duration: 0.4,
            },
        },
    },
    particles: {
        color: {
            value: '#ffffff',
        },
        links: {
            color: '#ffffff',
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1,
        },
        move: {
            direction: 'none',
            enable: true,
            outMode: 'bounce',
            random: false,
            speed: 6,
            straight: false,
        },
        number: {
            density: {
                enable: true,
                area: 800,
            },
            value: 80,
        },
        opacity: {
            value: 0.5,
        },
        shape: {
            type: 'circle',
        },
        size: {
            random: true,
            value: 5,
        },
    },
    detectRetina: true,
}
</script>

这些代码是经过整理的，本来我自己的有些乱，但是参考了一位博客之后做出的调整(同时感谢这位博客)

这些配置完之后，就可以显示粒子效果了

谢谢大家观看！