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

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

<div id="particles"></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%;
}

最后呈现效果如下：

遇到的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 );
}