vue项目中使用 vue-particles 制造粒子效果背景

先看背景效果：

 注：粒子的大小，颜色，和运动速度都可以自定义。背景图片是我自己找的，可根据需要替换成自己的。

背景图片：

再说过程：

第一步：下载插件

yarn add vue-particles //或者用npm i 去下

第二步：main.js 中导入并全局使用

// vue2：
import Vue from 'vue';
// 背景粒子特效
import VueParticles from 'vue-particles';
Vue.use(VueParticles);


// vue3:
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 背景粒子特效
import VueParticles from 'vue-particles';
app.use(VueParticles).mount('#app');

第三步：.vue文件中使用组件

以下仅为参考：

     <!-- 使用vue插件制造背景效果 -->
        <vue-particles
            color="#00aeff"
            :particleOpacity="0.7"
            :particleOpacityRandom="true"
            :particlesNumber="140"
            shapeType="circle"
            :particleSize="4"
            linesColor="#8EB5C9"
            :linesWidth="1"
            :lineLinked="false"
            :lineOpacity="0.6"
            :linesDistance="120"
            :moveSpeed="1"
            :hoverEffect="false"
            hoverMode="grab"
            :clickEffect="false"
            clickMode="push"
        >
        </vue-particles>

tip：   组件<vue-particles>最好靠前放