圖上那些類似於星座圖的點和線，是由vue-particles生成的，不僅自己動，而且能與使用者滑鼠事件產生互動。

一直中意這種動態外掛，今天有時間，迫不及待試了一波~

大寫的NICE~使用教程：

npm install vue-particles --save-dev  

main.js里加入以下程式碼：

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

App.vue 檔案——一個完整的例子：

<template>  <div id="app">    <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>    <router-view></router-view>  </div></template>/*如果想做背景圖片 可以給標籤一個class 直接新增背景圖*/

屬性：

color: String型別。預設'#dedede'。粒子顏色。particleOpacity: Number型別。預設0.7。粒子透明度。particlesNumber: Number型別。預設80。粒子數量。shapeType: String型別。預設'circle'。可用的粒子外觀型別有："circle","edge","triangle", "polygon","star"。particleSize: Number型別。預設80。單個粒子大小。linesColor: String型別。預設'#dedede'。線條顏色。linesWidth: Number型別。預設1。線條寬度。lineLinked: 布林型別。預設true。連線線是否可用。lineOpacity: Number型別。預設0.4。線條透明度。linesDistance: Number型別。預設150。線條距離。moveSpeed: Number型別。預設3。粒子運動速度。hoverEffect: 布林型別。預設true。是否有hover特效。hoverMode: String型別。預設true。可用的hover模式有: "grab", "repulse", "bubble"。clickEffect: 布林型別。預設true。是否有click特效。clickMode: String型別。預設true。可用的click模式有: "push", "remove", "repulse", "bubble"。