下载依赖
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都可以