npm install particles.js

定义一个组件： fm-bg.vue

<template>
    <div class="particles-js-box">
        <div id="particles-js"></div>
    </div>
</template>

<script>
/* eslint-disable */
import particlesJs from "particles.js";
import particlesConfig from "./particles.json";
export default {
    mounted() {
        this.init();
    },
    methods: {
        init() {
            particlesJS("particles-js", particlesConfig);
            document.body.style.overflow = "hidden";
        },
    },
};
</script>

<style scoped>
.particles-js-box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
#particles-js {
    background-color: #f1f3f4;
    width: 100%;
    height: 100%;
}
</style>

particles.json 配置文件

{
    "particles": {
        "number": {
            "value": 100,
            "density": {
                "enable": true,
                "value_area": 1000
            }
        },
        "color": {
            "value": [
                "#aa73ff",
                "#f8c210",
                "#83d238",
                "#33b1f8"
            ]
        },
        "shape": {
            "type": "circle",
            "stroke": {
                "width": 0,
                "color": "#fff"
            },
            "polygon": {
                "nb_sides": 5
            },
            "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
            }
        },
        "opacity": {
            "value": 0.9,
            "random": false,
            "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
            }
        },
        "size": {
            "value": 2,
            "random": true,
            "anim": {
                "enable": false,
                "speed": 4,
                "si***": 0.1,
                "sync": false
            }
        },
        "line_linked": {
            "enable": true,
            "distance": 120,
            "color": "#1e1e1e",
            "opacity": 0.6,
            "width": 1
        },
        "move": {
            "enable": true,
            "speed": 2,
            "direction": "none",
            "random": true,
            "straight": false,
            "out_mode": "out",
            "bounce": true,
            "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
        },
        "interactivity": {
            "detect_on": "canvas",
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "grab"
                },
                "onclick": {
                    "enable": false
                },
                "resize": true
            },
            "modes": {
                "grab": {
                    "distance": 140,
                    "line_linked": {
                        "opacity": 1
                    }
                },
                "bubble": {
                    "distance": 400,
                    "size": 40,
                    "duration": 2,
                    "opacity": 8,
                    "speed": 3
                },
                "repulse": {
                    "distance": 200,
                    "duration": 0.4
                },
                "push": {
                    "particles_nb": 4
                },
                "remove": {
                    "particles_nb": 2
                }
            }
        },
        "retina_detect": true
    }
}

使用

<template>
    <div>
        <div id="login">
            <div class="loginbox">
                <img
                    src="../../assets/images/logos/login.png"
                    style="width: 400px; margin-bottom: 12px"
                />
                <el-form ref="form" :model="form" label-width="60px">
                    <el-form-item label="用户名:">
                        <el-input
                            type="text"
                            v-model="uname"
                            style="width: 250px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input
                            type="password"
                            v-model="upwd"
                            style="width: 250px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium">登陆</el-button>
                        <el-button
                            style="margin-right: 60px; margin-left: 10px"
                            type="primary"
                            size="medium"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 使用 -->
        <particles></particles>      
    </div>
</template>

<script>
import Particles from "../../components/particles/fm-bg.vue";
export default {
    components: { Particles },
    data() {
        return {
            uname: "",
            upwd: "",
        };
    },
};
</script>

<style lang="less">
#login {
    width: 100%;
    height: 630px;
    padding-top: 100px;
    .loginbox {
        text-align: center;
        width: 400px;
        height: 600px;
        margin-left: 550px;
    }
}
.el-form-item__label {
    color: #6647ae !important;
    font-size: 14px;
    font-weight: bold;
}
</style>

效果图:

alt