知乎的首页后面的粒子动效总觉得很炫酷，搜了一下，发现是用particles.js编写的。刚好目前的项目是利用vue框架的，两个凑在一起学了。
讲道理，这个用得好的话，页面是可以很酷的，譬如我现在写的项目
登录页
嘻嘻~
安装particles.js
npm install --save particles.js
配置particles.js
1.data
这个data是用于控制粒子在页面中所呈现的状态。
2.template
这个就是动态粒子要展示的位置。
3.script
因为涉及到dom树，所以必须在挂载结束后初始化particles.js。第一个参数id就是你在template上取得id名，像我要写的话就是particles。第二个参数是你的data存放的路径，个人建议使用相对路径。
4.style
讲到这里会发现，还有一个最重要的点没讲出来，恩，就是particles.js 的引入。当你的使用范围比较小时，可以直接在当前vue文件的script中引入，即
文件
import particles from 'particles.js'
又或者你觉得这样不好管理，一定要放在main文件中也可以
文件
import particles from 'particles.js'
Vue.use(particles)
最后呈现的效果如下
总结
以上所述是小编给大家介绍的JS库中的Particles.js在vue上的运用案例分析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/36453.html