particles.vue3在项目中的使用

---

前言

如果你想让你的页面看起来花里胡哨的话，不妨可以试一下particles.vue3，那什么是particles.vue3，以及它有什么作用呢？下面我们就一起来看看吧！

---

一、 particles.vue3 是什么？

  particles.vue3 是一个 Vue 3 的组件库，用于在 Vue 3 项目中创建和管理粒子效果。它基于 tsparticles 引擎，提供了一系列的 Vue 组件，使我们能够轻松地在应用程序中添加动态的粒子效果。
  如果您正在开发一个 Vue 3 项目，并且想要为您的应用程序添加粒子效果，您可以考虑使用 particles.vue3 组件库来简化开发过程，并实现各种炫酷的粒子效果。

二、使用步骤

1.安装粒子库

yarn add particles.vue3

或者是：

npm install particles.vue3

另外也需要安装 tsparticles

yarn add tsparticles   

2.完成相关配置

2.1 在main.js中引入：

import Particles from 'particles.vue3'
app.use(Particles) // 配置相关的文件

2.2 在需要的页面添加组件（我这里是login.vue）

<!-- 登陆页面 -->
<template>
<Particles
    id="tsparticles"
    :particlesInit="particlesInit" 
    :particlesLoaded="particlesLoaded"
    :options="{
      background: {
        color: {
          value: '#22a7f2'
        }
      },
      fpsLimit: 120,
      interactivity: {
        events: {
          onClick: {
            enable: true,
            mode: 'push'
          },
          onHover: {
            enable: true,
            mode: 'repulse'
          },
          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',
          distance: 150,
          enable: true,
          opacity: 0.5,
          width: 1
        },
        collisions: {
          enable: true
        },
        move: {
          direction: 'none',
          enable: true,
          outModes: {
            default: 'bounce'
          },
          random: false,
          speed: 1,
          straight: false
        },
        number: {
          density: {
            enable: true,
            area: 800
          },
          value: 80
        },
        opacity: {
          value: 0.5
        },
        shape: {
          type: 'circle'
        },
        size: {
          value: { min: 1, max: 5 }
        }
      },
      detectRetina: true
    }"
  />
  </template>


<script setup>
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.

const particlesInit = async engine => {
    //await loadFull(engine);
    await loadSlim(engine);
};
</script>

需要注意的是：这里要对tsparticles-slim包进行安装，这里的loadFull和loadSlim不同在于前者是完整版，拥有更加完善的功能，而tsparticles-slim是轻量版本，他只加载tsparticles的核心功能。

yarn add tsparticles-slim

简单的动态粒子效果就出来啦，展示！！！！！

---

总结

通过安装引入 particles.vue3 组件库，实现动态粒子页面效果，今天的分享就到这里，喜欢的小伙伴快去试试吧！！！顺便给个赞吧
嘤嘤嘤~~~~