vue工程：使用vue-particles实现动态粒子效果且只作为背景显示（包括样式设置）

4.1、根据id号调整样式

4.2 根据自定义的class名称lizi设置样式

一、综述

====

为了提高页面展示效果，特别类似于登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果。

二、实现过程

======

2.1 安装vue-particles

npm install vue-particles --save-dev

2.2 全局配置vue-particles

在main.js里面：

import VueParticles from ‘vue-particles’

Vue.use(VueParticles)

2.3 使用 vue-particles

在vue文件template标签中：

<vue-particles

id=“particles-js” /* 此处可以手动定义id为默认值particles-js，也可以不写 */

/* 圆点设置： 颜色、透明度、数量、外形、大小 */

color=“#fff”

:particleOpacity=“0.7”

:particlesNumber=“60”

shapeType=“circle”

:particleSize=“4”

/* 线的设置： 颜色、线宽、、透明度、最大连接距离、移动速度，等等 */

linesColor=“#fff”

:linesWidth=“1”

:lineLinked=“true”

:lineOpacity=“0.4”