Vue项目中particles的使用，来实现屏幕飘浮小星星动画（满天星）
下载包可采用npm/cnpm
npm/cnpm install particles.js --save这里附上git地址：/VincentGarreau/particles.js版本：
在main.js 中引包，注册
import particles from 'particles.js'Vue.use(particles)
在所要使用的界面引用如下代码
<div id="particles-js"><canvas class="particles-js-canvas-el" width="1920" height="1080" style="width: 100%; height: 100%;"></canvas></div>
mounted(){particlesJS('particles-js',{"particles": {"number": {"value": 40,//数量"density": {"enable": true, //启用粒子的稀密程度"value_area": 800 //区域散布密度大小}},"color": {"value": "#f3eaa1" //原子的颜色},"shape": {"type": "star", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]"stroke": {"width": 0, //原子的宽度"color": "#f3eaa1" //原子颜色},"polygon": {"nb_sides": 5 // 原子的多边形边数},"image": {"src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "/assets/img/yop.png""width": 100, //图片宽度"height": 100 //图片高度}},"opacity": {"value": 1, //不透明度"random": true, //随机不透明度"anim": {"enable": true, //渐变动画"speed": 1, // 渐变动画速度"opacity_min": 0, //渐变动画不透明度"sync": true}},"size": {"value": 3, //原子大小"random": true, // 原子大小随机"anim": {"enable": false, // 原子渐变"speed": 4, //原子渐变速度"size_min": 0.3,"sync": false}},"line_linked": {"enable": false, //连接线"distance": 150, //连接线距离"color": "#ffffff", //连接线颜色"opacity": 0.4, //连接线不透明度"width": 1 //连接线的宽度},"move": {"enable": true, //原子移动"speed": 1, //原子移动速度"direction": "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left""random": true, //移动随机方向"straight": false, //直接移动"out_mode": "out", //是否移动出画布"bounce": false, //是否跳动移动"attract": {"enable": false, // 原子之间吸引"rotateX": 600, //原子之间吸引X水平距离"rotateY": 600 //原子之间吸引Y水平距离}}},"interactivity": {"detect_on": "canvas", //原子之间互动检测 "canvas", "window""events": {"onhover": {"enable": true, //悬停"mode": "bubble" //悬停模式"grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]},"onclick": {"enable": false, //点击效果"mode": "repulse" //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]},"resize": true // 互动事件调整},"modes": {"grab": {"distance": 100, //原子互动抓取距离"line_linked": {"opacity": 0.8 //原子互动抓取距离连线不透明度}},"bubble": {"distance": 250, //原子抓取泡沫效果之间的距离"size": 4, // 原子抓取泡沫效果之间的大小"duration": 2, //原子抓取泡沫效果之间的持续事件"opacity": 1, //原子抓取泡沫效果透明度"speed": 3},"repulse": {"distance": 400, //击退效果距离"duration": 0.4 //击退效果持续事件},"push": {"particles_nb": 4 //粒子推出的数量},"remove": {"particles_nb": 2}}},"retina_detect": true});}
之所以这么写，是遇到了一些问题，自己将data数据抽离出去，就会报错（传的是相对路径），不知道为什么，还请各位小伙伴赐教。
效果图如下
## 组件封装(可以直接拿过去使用哦！！)
<template><div><div id="particles-js"><canvasclass="particles-js-canvas-el"width="1920"height="1080"style="width: 100%; height: 100%"></canvas></div></div></template><script>export default {mounted() {particlesJS("particles-js", {particles: {number: {value: 40, //数量density: {enable: true, //启用粒子的稀密程度value_area: 800, //区域散布密度大小},},color: {value: "#f3eaa1", //原子的颜色},shape: {type: "star", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]stroke: {width: 0, //原子的宽度color: "#f3eaa1", //原子颜色},polygon: {nb_sides: 5, // 原子的多边形边数},image: {src: "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "/assets/img/yop.png"width: 100, //图片宽度height: 100, //图片高度},},opacity: {value: 1, //不透明度random: true, //随机不透明度anim: {enable: true, //渐变动画speed: 1, // 渐变动画速度opacity_min: 0, //渐变动画不透明度sync: true,},},size: {value: 3, //原子大小random: true, // 原子大小随机anim: {enable: false, // 原子渐变speed: 4, //原子渐变速度size_min: 0.3,sync: false,},},line_linked: {enable: false, //连接线distance: 150, //连接线距离color: "#ffffff", //连接线颜色opacity: 0.4, //连接线不透明度width: 1, //连接线的宽度},move: {enable: true, //原子移动speed: 1, //原子移动速度direction: "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"random: true, //移动随机方向straight: false, //直接移动out_mode: "out", //是否移动出画布bounce: false, //是否跳动移动attract: {enable: false, // 原子之间吸引rotateX: 600, //原子之间吸引X水平距离rotateY: 600, //原子之间吸引Y水平距离},},},interactivity: {detect_on: "canvas", //原子之间互动检测 "canvas", "window"events: {onhover: {enable: true, //悬停mode: "bubble", //悬停模式"grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]},onclick: {enable: false, //点击效果mode: "repulse", //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]},resize: true, // 互动事件调整},modes: {grab: {distance: 100, //原子互动抓取距离line_linked: {opacity: 0.8, //原子互动抓取距离连线不透明度},},bubble: {distance: 250, //原子抓取泡沫效果之间的距离size: 4, // 原子抓取泡沫效果之间的大小duration: 2, //原子抓取泡沫效果之间的持续事件opacity: 1, //原子抓取泡沫效果透明度speed: 3,},repulse: {distance: 400, //击退效果距离duration: 0.4, //击退效果持续事件},push: {particles_nb: 4, //粒子推出的数量},remove: {particles_nb: 2,},},},retina_detect: true,});},};</script><style lang="scss" scoped>#particles-js {position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;}</style>
