vue-particles使用记录

• * 一、介绍
  • 二、组件官方地址
  • 三、使用方法
  • 四、效果截图
  • 五、遇到问题
  • 六、使用感受

---

一、介绍

Vue.js component for particles backgrounds SSR compatible
摘自官方，翻译一下：Vue.js版粒子背景组件 服务端渲染(SSR:server side render)兼容

---

二、组件官方地址

Demo和用法介绍：https://vue-particles.netlify.app/
github开源地址：https://github.com/creotip/vue-particles

---

三、使用方法

很多博客上都介绍了很多具体使用方法，详细使用可以参考上方的“Demo和用法介绍”地址。
这里简单记录一下，如果使用Webpack方式的模块化开发，一般第一步就是npm install；

npm install vue-particles --save-dev

接着在相应的入口处import；

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

然后在需要使用的该组件的地方写上相应的标签

<vue-particles></vue-particles>

支持的Props如下:

名称

类型

默认值

描述

color

String

#dedede

粒子颜色

particleOpacity

Number

0.7

粒子透明度

particlesNumber

Number

80

粒子数量

shapeType

String

“circle”

粒子形状，可选值: “circle”,“edge”,“triangle”, “polygon”,“star”

particleSize

Number

4

单个粒子尺寸

linesColor

String

#dedede

线条颜色

linesWidth

Number

1

线条宽度

lineLinked

Boolean

true

线条是否允许相连

lineOpacity

Number

0.4

线条透明度

linesDistance

Number

150

线条距离

moveSpeed

Number

3

粒子运动速度

hoverEffect

Boolean

true

是否启动鼠标悬停效果

hoverMode

String

grab

鼠标悬停效果可选值: “grab”, “repulse”, “bubble”

clickEffect

Boolean

true

是否允许点击

clickMode

String

push

点击后可选值: “push”, “remove”, “repulse”, “bubble”

---

四、效果截图

下面是截图自vue-particles官方网址的首页图片

这张是自己写的一个Demo

---

五、遇到问题

vue-particles是一款很棒的粒子特效组件、提供了我们常规能想到的props、例如粒子形状、数量、粒子运动速度等。在基于chromium内核的浏览器和Firebox浏览器有着不错的表现，但是在IE11及以下版本的浏览器和某些IE Edge版本中还是存在一些问题。

1. IE11及其以下版本打开页面是一片空白，没有内容显示（包括某些双内核浏览器，如QQ浏览器、360浏览器使用IE内核范围时也会这样）。打开控制台会显示 “script1003: 缺少 ‘:’ ” 的错误。原因是IE不支持 “install(){ }”这种写法，而vue-particles的index.js文件中使用了这种写法

   const VueParticles = {

   install (Vue, options) {
       Vue.component('vue-particles', particles)
   }

   }

解决方法1：修改项目下node_modules/vue-particles/src/vue-particles/index.js文件，把 “const VueParticles” 部分修改成如下代码

const VueParticles = {

    install: function (Vue, options) {
        Vue.component('vue-particles', particles)
    }

}

此外在IE运行还需要babel对某些语法进行转换。

2. 浏览器CPU和GPU占用较大，比如万恶的IE11及其以下版本，CPU持续占用为十几到二十几，GPU占用更是高达六十多。而firefoxCPU持续占用也一直在10-20之间徘徊，GPU占用也有十几；而基于chromium内存的浏览器CPU占用比较正常，但是GPU占用一直持续在二十多。
3. 还是IE，有时候IE会有掉帧现象，表现为粒子突然运动突然停滞一小下，过一会又开始运动，此时粒子位置已经变化。看起来像瞬移一样。

六、使用感受

vue-particles提供了好看的粒子特效，可以增加页面的炫幻感和科技感。但是最好不要把这种粒子特效应用到全部页面，因为该组件会对CPU和GPU有较高的占用，久而久之会影响页面的流畅，造成卡顿现象。可以应用在单个页面，例如入口页面或者登录页这种不需要长久停留的页面。同时还要注意在万恶IE的兼容性方面
现如今，微软都宣布停止支持旧版IE，现在Win10默认浏览器为Edge，而Edge在各方面表现很好，一般很少有旧版IE那种问题，但是某些万恶的浏览器比如QQ浏览器、360安全浏览器还提供IE内核，估计是兼容某些上古世纪网站根据IE开发的插件。淦，要不是有个跟我一起开发的程序员一直用QQ浏览器的IE内核打开打包后的项目说显示不了，我都忘记了还有双内核的浏览器这种东西了。= = 、