vue粒子背景

安装
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"
        :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>

点击进入官网

关于粒子背景覆盖问题可以使用相对绝对布局或者重写对应的css，可以运行一次在浏览器F12查看插件具体的css
demo

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

    div>
template>

<script>


    export default {
    }
script>

<style scoped>

    #app {
        font-family: "Hiragino Sans GB", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #333;
        background-color: #FFFFFF;
    }
    .particles-js{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    input{
        margin-top: 100px;
        z-index: 999;
        position: relative;
    }
style>