vue-particles （多彩）粒子插件动画 使用教程

描述：
vue框架使用vue-particles 粒子特效插件,制作粒子动画背景，可以与用户进行交互，具有可控制数量，大小随机，有连线（可取消）等等。效果如下图（官网）：

步骤
1.安装：

Yarn add vue-particles -s

2.引入

import VueParticles from 'vue-particles'  
Vue.use(VueParticles)

3.使用
方法一：
直接以标签的形式使用：

注意，由于底层采用的id标识具有唯一性，多次引用绝对会出错，只能引用一次，这个bug不知道是不是就自己这个个例，以防万一，推荐方法二

<vue-particles
      color="#409EFF"
      :particleOpacity="0.8"
      :particlesNumber="500"
      shapeType="circle"
      :particleSize="2"
      linesColor="#409EFF"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="5"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="particles1"
    ></vue-particles>

方法二：
（1）在官方github中拉取官方封装的组件，复制到自己的项目中（没错就是复制），由于id加入了随机数控制，便可以多次以组件的方式加载，不再害怕冲突，也更方便开发者对粒子的动画进行深一步定制化。
（2）官方粒子组件：点我浏览
（3）把拉取的代码生成公共组件，在需要应用的界面，import 引入这个组件，注册组件，以父子传参的形式，传入相关参数进行调节。（这里与方法一几乎一致）

上面提到的方法，你可以在不同的界面随意使用，但是有点遗憾，不能自定义随机颜色，父传子的形式，颜色单一。这里我有一个方法，就是使用多个定义的particles组件，通过position的方式就行多层叠加，来实现多彩的粒子。

如案例：

利用position 进行叠加