JS库中的Particles.js在vue上的运用实例详解

知乎的首页后面的粒子动效总觉得很炫酷，搜了一下，发现是用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中引入，即

又或者你觉得这样不好管理，一定要放在main文件中也可以

最后呈现的效果如下

以上就是JS库中的Particles.js在vue上的运用实例详解的详细内容，更多请关注Gxl网其它相关文章！