图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动。
使用教程:npm install vue-particles --save-dev
main.js里加入以下代码:
import VueParticles from 'vue-particles' Vue.use(VueParticles)
App.vue 文件——一个完整的例子:
<template><div id="app"><vue-particlescolor="#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><router-view></router-view></div></template>
/如果想做背景图片 可以给标签一个class 直接添加背景图/