particles.js在vue中使用，以及一些常见的bug总结

古城微笑少年丶 2023-08-17 16:30 119阅读 0赞

## particles.js的使用 ##

**全局安装particles.js**

npm install --save particles.js

**配置particles.js**  
引入particles.js文件  
当你的使用范围比较小时，可以直接在当前vue文件的script中引入

//vue单文件
    import particles from 'particles.js'

范围较大时，可以全局引入，在main.js引入

import particles from 'particles.js'
    Vue.use(particles)

我在asset文件夹下建立一个particles.json

{ 
        "particles": { 
          "number": { 
            "value": 60,
            "density": { 
              "enable": true,
              "value_area": 800
            }
          },
          "color": { 
            "value": ["#344d7b","#7A378B","#551A8B"]
          },
          "shape": { 
            "type": "circle",
            "stroke": { 
              "width": 3,
              "color": "#fff"
            },
            "polygon": { 
              "nb_sides": 5
            }
          },
          "opacity": { 
            "value": 1,
            "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": "#4381bd",
            "opacity": 0.6,
            "width": 2
          },
          "move": { 
            "enable": true,
            "speed": 4,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": { 
              "enable": false,
              "rotateX": 100,
              "rotateY": 1200
            }
          }
        },
        "interactivity": { 
          "detect_on": "Window",
          "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
      }

在template定义一个div

在script配置

// 引入particles.json文件用于配置canvas
    import particlesJson from '../assets/particles.json'
    
    export default { 
      name: 'particlesDemo',
      mounted(){ 
        // particles是我们设置的id，particlesJson是我们引入的json文件
        particlesJS('particles', particlesJson,);
    }
    }

在style内处设置

#particles{ 
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #000000;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50% 50%;
    }

最后呈现效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]

## 遇到的bug ##

1、根据官方文档引入，效果没有出来，官方文档引入代码如下

mounted(){ 
        particlesJS.load('id','path to your particles.data');
    }

解决方案：  
只要把.load删掉就行

mounted(){ 
        particlesJS('id','path to your particles.data');
    }

2、效果出来了，但是我配置的json的样式没有上去  
解决方案：  
路径不能放在particlesJS里面，从外部引入，在赋值上去

import particlesJson from '../assets/particles.json'
    mounted(){ 
        particlesJS('id',particlesJson );
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]: /images/20230810/5a166bf7c7414113940c5aa6e3780b08.png