參考鏈接:http://www.lxweimin.com/p/53199b842d25
實現的效果圖：

image.png

1.下載插件
npm install vue-particles --save-dev

2.在main.js里加這個代碼

//引入粒子效果開始
import VueParticles from "vue-particles"
Vue.use(VueParticles)
//引入粒子效果結束

3.在login登錄頁的index.vue寫入這個代碼:

<vue-particles
  class="canvas" 
 color="#5285c6" 
 :particle-opacity="0.7" 
 :particles-number="80" 
  shape-type="circle"
 :particle-size="5" 
 lines-color="#5285c6" 
:lines-width="1"
 :line-linked="true"
 :line-opacity="0.4" 
:lines-distance="150" 
:move-speed="7" :hover-effect="true" 
hover-mode="grab" 
:click-effect="true"
 click-mode="push" 
style="height: 100vh" 
/>

4.樣式修改

  .login-form {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }