将particles.js集成到Vue组件时的函数错误修复方案

That error pops up because you're using the wrong function name to initialize particles.js. The library exports its core initialization function as particlesJS (with the JS suffix), not particles. Here's how to fix your component properly:

Fixed Complete Component Code #

Template #

<template>
  <div>
    <div id="particles-js"></div>
  </div>
</template>

Script #

<script>
// Import the correct function from particles.js
import particlesJS from 'particles.js'

export default {
  mounted() {
    this.initParticles()
  },
  methods: {
    initParticles () {
      // Use the correct function name: particlesJS
      particlesJS("particles-js", {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 700
            }
          },
          "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.1,
              "sync": false
            }
          },
          "size": {
            "value": 3,
            "random": true,
            "anim": {
              "enable": false,
              "speed": 40,
              "size_min": 0.1,
              "sync": false
            }
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
              "enable": false,
              "rotateX": 600,
              "rotateY": 1200
            }
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "grab"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 140,
              "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
      })
    }
  }
}
</script>

CSS #

<style scoped>
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #00356B;
}
</style>

Why This Fixes the Issue #

• Particles.js exposes its initialization logic under the particlesJS name (not particles) when imported via ES modules. Your original code tried to call a non-existent particles() function, which caused the TypeError.
• All your particle configuration settings are correct, so once you switch to the right function name, the particles will render as expected in your Vue component.

内容的提问来源于stack exchange，提问作者DevonDahon