Vue3使用Particles实现动态粒子背景

        由于登录页面显得单调，所以选择Particles这个库作为背景

1. 选择一个包管理器，安装particles.vue3

   npm install particles.vue3
   

2. 安装依赖文件tsparticles(如果出现背景只有颜色，没有粒子特效一般是缺少这个文件）

   npm install tsparticles

3. main.js中引入particle

   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   import App from './App.vue'
   import 'element-plus/dist/index.css'
   import './index.css'
   import Particles from "particles.vue3"
   
   
   const app = createApp(App)
   app.use(Particles)
   app.use(ElementPlus)
   app.mount('#app')

4. 组件中引入particle组件和tsparticles以及配置项options，options可以在组件的setup中定义，也可以单独写一个文件暴露，为了简洁美观，我选择单独写在一个js文件中暴露出来。

   <template>
     <div class="box">
       <Particles id="tsparticles" class="login-particles" :particlesInit="particlesInit"
           :particlesLoaded="particlesLoaded" :options="options" />
     </div>
     <teleport to="body">
     <div class="loginform">
        <el-form>
     <!-- 表单项和表单配置省略，具体配置和表单项参照ElementUI-Plus官网 -->
         </el-form>
     </div>
     </teleport>
   </template>
   import { options } from "./options";
   import { loadFull } from 'tsparticles'
   export default {
     name: "Index",
     setup() {
       const particlesInit = async (engine) => {
         await loadFull(engine)
       }
   
       const particlesLoaded = async (container) => {
         console.log('Particles container loaded', container)
       }
   
   
       return {
         particlesInit,particlesLoaded,options
       };
     },
   };
   </script>
   <style scoped>
   .loginform{
     position: absolute;
     width: 500px;
     height: auto;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     text-align: center;
   }
   </style>

5. options配置项可去particle官网查看不同种类 https://particles.js.org/ 这里附上官网的一个demo

   export  const options = {
     fpsLimit: 60,
     fullScreen: { enable: true },
     particles: {
       number: {
         value: 50
       },
       shape: {
         type: "circle"
       },
       opacity: {
         value: 0.5
       },
       size: {
         value: 400,
         random: {
           enable: true,
           minimumValue: 200
         }
       },
       move: {
         enable: true,
         speed: 10,
         direction: "top",
         outModes: {
           default: "out",
           top: "destroy",
           bottom: "none"
         }
       }
     },
     interactivity: {
       detectsOn: "canvas",
       events: {
         resize: true
       }
     },
     detectRetina: true,
     themes: [
       {
         name: "light",
         default: {
           value: true,
           mode: "light"
         },
         options: {
           background: {
             color: "#f7f8ef"
           },
           particles: {
             color: {
               value: ["#5bc0eb", "#fde74c", "#9bc53d", "#e55934", "#fa7921"]
             }
           }
         }
       },
       {
         name: "dark",
         default: {
           value: true,
           mode: "dark"
         },
         options: {
           background: {
             color: "#080710"
           },
           particles: {
             color: {
               value: ["#004f74", "#5f5800", "#245100", "#7d0000", "#810c00"]
             }
           }
         }
       }
     ],
     emitters: {
       direction: "top",
       position: {
         x: 50,
         y: 150
       },
       rate: {
         delay: 0.2,
         quantity: 2
       },
       size: {
         width: 100,
         height: 0
       }
     }}