vue3+vite使用particles实现超炫粒子效果

1、下载particles插件

2、把下载好的particles文件夹放在public文件夹下

3、在index.html中引入js：<script src='/particles/particles.min.js'></script>

4、新建一个.vue文件，在template中添加如下代码：

<div id="chart1" ref="chart1" class="w-full h-1/2"></div>

5、在onMounted中添加如下代码：

window.particlesJS.load('chart1', 'particles/particles.json');

6、给div容器添加如下样式：

#chart1 {
    background-color: #073d57;
    background-image: radial-gradient(
        circle farthest-side at 105% 100%,
        #eeffe0,
        #3e8cb0 38%,
        #091b37
    );
}

7、效果如下图：