简介

vue-particles是粒子背景的Vue.js组件，支持服务端渲染。

github 地址：

https://github.com/creotip/vue-particles

github star: 1K+

最新版本：1.0.9，MIT 协议

主要技术栈

Vue (^ 2.2.6)

particles.js (^ 2.0.0)

组件属性简单介绍

项目截图

快速开发

安装

npm install vue-particles --save-dev

Main.js

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

app.vue 简单示例

<template>
    <div id="app">
      <vue-particles color="#dedede"></vue-particles>
    </div>
 </template>

app.vue 复杂示例

<template>
    <div id="app">
      <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
    </div>
 </template>

PS

vue-particles 是一款热门的粒子特效背景组件，整体感觉不错，但是该开源项目有将近1年多没更新，所以对于vue2.6以上版本的支持不清楚是否会友好，简单应用应该没啥问题。纠结之际，小编又查阅了原生particles.js 开源库，发现其3年多没更新了但是也是非常热门，star也有20K+。 所以决定用vue-particles还是原生的particles.js库来实现粒子背景特效，感觉都行。对于想实现粒子背景特效又想用vue的同学来说，可以使用vue-particles来实现想要的功能。