vue使用particle.js实现前端可交互的粒子效果（含代码）

<template>
  <div id="particles-js"></div>
</template>
 
<script>
import Particles from 'particles.js'
 
export default {
  name: 'ParticlesBackground',
  mounted() {
    this.initParticlesJS()
  },
  methods: {
    initParticlesJS() {
      /* 配置particles.js参数 */
      const particlesParams = {
        particles: {
          number: { value: 80, density: { enable: true, value_area: 800 } },
          color: { value: '#ffffff' },
          shape: {
            type: 'circle',
            stroke: { width: 0, color: '#000000' },
            polygon: { nb_sides: 5 }
          },
          opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.25, sync: false } },
          size: { value: 5, random: true, anim: { enable: false, speed: 20, size_min: 0.1, sync: false } },
          line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.4, width: 1 },
          move: { enable: true, speed: 2, direction: 'none', random: false, straight: false, out_mode: 'out' }
        },
        interactivity: {
          detect_on: 'canvas',
          events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' }, resize: true },
          modes: {
            grab: { distance: 400, line_linked: { opacity: 1 } },
            bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
            repulse: { distance: 200, duration: 0.4 },
            push: { particles_nb: 4 },
            remove: { particles_nb: 2 }
          }
        },
        retina_detect: true
      }
 
      /* 初始化particles.js */
      this.particlesJS = Particles.init('particles-js', particlesParams)
    }
  },
  beforeDestroy() {
    if (this.particlesJS) {
      this.particlesJS.destroy()
    }
  }
}
</script>
 
<style>
/* 确保particles.js覆盖整个父元素 */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
}
</style>

这段代码展示了如何在Vue组件中使用particles.js库来创建一个背景粒子效果。在mounted钩子中初始化粒子，并在beforeDestroy钩子中清理资源，以防止内存泄漏。这个例子简洁明了，并包含了注释，以便理解。