vue量子背景 -＞ vue-particles

下载依赖

npm install vue-particles --save-dev  

main.js 中引入

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

好了 ，下面只需要只要引入ok

<vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>

总结：在main.js中引入，如果想引用到整个项目中就在app里引入放在前 （他俩同级关系）
，若只想在登录页使用 直接在登录页的vue中copy上面的配置代码段，同理和表单同级关系，被一个根标签包裹

<template>
	<div>
	  <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      	>
      </vue-particles>
      
      <表单元素../>
	</div>
</template>

样式会比较麻烦，定位 、flex都可以