记录：Vue3+ts 粒子特效

1. 安装依赖
   npm install particles.vue3 --save
   npm i tsparticles

2. src目录下创建文件名为 env.d.ts声明文件,并写入

   declare module 'particles.vue3';
   

3. 在main.ts中引入并使用

   import Particles from 'particles.vue3'
   createApp(App)
     .use(Particles)
     .mount('#app')
   

   
    

4. 页面中直接使用，最好设置定位重叠

   <template>
       <div style="position: absolute; left: 0; top: 0; z-index: 0">
         <Particles
           id="tsparticles"
           :particlesInit="particlesInit"
           :particlesLoaded="particlesLoaded"
           :options="options"
         />
       </div>
   </template>
   
   <script setup lang="ts">
   //引入vue
   import { LockOutlined, CrownOutlined } from "@ant-design/icons-vue";
   import { reactive } from "vue";
   import { loadFull } from "tsparticles";
   import type { Engine } from "tsparticles-engine";
   
   const particlesInit = async (engine: Engine) => {
     await loadFull(engine);
   };
   
   const particlesLoaded = async (container: any) => {
     console.log("Particles container loaded", container);
   };
   const options = reactive({
     background: {
       color: {
         value: "#000", // 粒子颜色
       },
     },
     fpsLimit: 60,
     interactivity: {
       events: {
         onClick: {
           enable: true,
           mode: "push", // 可用的click模式有: "push", "remove", "repulse", "bubble"。
         },
         onHover: {
           enable: true,
           mode: "repulse", // 可用的hover模式有: "grab", "repulse", "bubble"。
         },
         resize: true,
       },
       modes: {
         bubble: {
           distance: 400,
           duration: 2,
           opacity: 0.8,
           size: 40,
         },
         push: {
           quantity: 4,
         },
         repulse: {
           distance: 200,
           duration: 0.4,
         },
       },
     },
     particles: {
       color: {
         value: "#ffffff",
       },
       links: {
         color: "#ffffff", // '#dedede'。线条颜色。
         distance: 150, // 线条长度
         enable: true, // 是否有线条
         opacity: 0.5, // 线条透明度。
         width: 1, // 线条宽度。
       },
       collisions: {
         enable: false,
       },
       move: {
         direction: "none",
         enable: true,
         outMode: "bounce",
         random: false,
         speed: 2, // 粒子运动速度。
         straight: false,
       },
       number: {
         density: {
           enable: true,
           area: 800,
         },
         value: 80, // 粒子数量。
       },
       opacity: {
         value: 0.5, // 粒子透明度。
       },
       shape: {
         type: "circle", // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
       },
       size: {
         random: true,
         value: 2, // 粒子大小。
       },
     },
     detectRetina: true,
   });
   </script>

   运行即可，粒子可根据自己调整。