一、第一种
使用script标签引入，比较简单方便，但是效果比较单一，而且是在body上的背景，而vue又是单页面应用，所以说一个页面引入后其他页面也会有这个效果
mounted() {const oScript = document.createElement('script');oScript.type = 'text/javascript';oScript.color='220,20,60'oScript.opacity='0.9'oScript.src = '/canvas-nest.js/1.0.1/canvas-nest.min.js';document.body.appendChild(oScript);}
二、第二种
引入particles插件
页面部分<div id="particles" ></div>js部分mounted() {this.$nextTick(()=>{particlesJS.load('particles','../../static/app.json');})}app.json文件放最后了
三、第三种
引入vue-particles插件
页面部分<vue-particlesclass="aa"color="#292929":particleOpacity="1":particlesNumber="80"shapeType="circle":particleSize="2"linesColor="#292929":linesWidth="1":lineLinked="true":lineOpacity="0.8":linesDistance="150":moveSpeed="3":hoverEffect="true"hoverMode="grab":clickEffect="true"></vue-particles>js部分（main文件中）import VueParticles from 'vue-particles' Vue.use(VueParticles)
四、第四种
使用threejs模拟粒子动态效果
ps：app.json文件（第二种）
app.json文件{"particles": {"number": {"value": 60,"density": {"enable": true,"value_area": 800}},"color": {"value": ["#344d7b","#7A378B","#551A8B"]},"shape": {"type": "star","stroke": {"width": 3,"color": "#fff"},"polygon": {"nb_sides": 5}},"opacity": {"value": 1,"random": false,"anim": {"enable": false,"speed": 1,"opacity_min": 0.1,"sync": false}},"size": {"value": 3,"random": true,"anim": {"enable": false,"speed": 40,"size_min": 0.1,"sync": false}},"line_linked": {"enable": true,"distance": 150,"color": "#4381bd","opacity": 0.6,"width": 2},"move": {"enable": true,"speed": 4,"direction": "none","random": false,"straight": false,"out_mode": "out","bounce": false,"attract": {"enable": false,"rotateX": 100,"rotateY": 1200}}},"interactivity": {"detect_on": "Window","events": {"onhover": {"enable": true,"mode": "grab"},"onclick": {"enable": true,"mode": "push"},"resize": true},"modes": {"grab": {"distance": 140,"line_linked": {"opacity": 1}},"bubble": {"distance": 400,"size": 40,"duration": 2,"opacity": 8,"speed": 3},"repulse": {"distance": 200,"duration": 0.4},"push": {"particles_nb": 4},"remove": {"particles_nb": 2}}},"retina_detect": true}
