vue引入粒子背景图效果

安装依赖

npm install vue-particles --save-dev

main.js

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

template

    <vue-particles
          color="#409EFF"
          :particleOpacity="0.7"
          :particlesNumber="88"
          shapeType="circle"
          :particleSize="6"
          linesColor="#409EFF"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push">
    </vue-particles>

注意：不用放到最外层

css

  #particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}