Particles粒子库在Vue3中的应用

一、引言

当我们在开发一个系统时，尤其是后台管理系统的开发中，网站的登录页背景效果如果足够简约并且具有炫酷属性的话，那对系统的整体期待值会比较高。而Particles粒子效果就是其中一种，目前多与Vue3的项目相结合。

二、Particles粒子库的安装与使用

库名：@tsparticles/vue3（npm库中的地址）

1. 安装

目前npm安装推荐使用npm i @tsparticles/vue3
使用yard的话官网推荐命令yarn add @tsparticles/vue3

2. 引入vue3的项目

• 以下是作者推荐的导入方式，在主文件main.js中

  • 还需要安装加载loadSlim的库，npm i @tsparticles/slim
    为啥不安装tsparticles-slim，具体原因我第三部分会讲
  • 下面的use注册内容，原封不动复制粘贴过去即可

  import Particles from "@tsparticles/vue3";
  //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.
  
  createApp(App).use(Particles, {
      init: async engine => {
          // await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
          await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations
      },
  });
  

• 将粒子标签及属性内容导入到对应登录页面（复制粘贴即可，第一个vue-particles可不要）

  <template>
      <div id="app">
          <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" />
  
          <vue-particles
              id="tsparticles"
              :particlesLoaded="particlesLoaded"
              :options="{
                      background: {
                          color: {
                              value: '#0d47a1'
                          }
                      },
                      fpsLimit: 120,
                      interactivity: {
                          events: {
                              onClick: {
                                  enable: true,
                                  mode: 'push'
                              },
                              onHover: {
                                  enable: true,
                                  mode: 'repulse'
                              },
                          },
                          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
                          },
                          move: {
                              direction: 'none',
                              enable: true,
                              outModes: 'bounce',
                              random: false,
                              speed: 6,
                              straight: false
                          },
                          number: {
                              density: {
                                  enable: true,
                              },
                              value: 80
                          },
                          opacity: {
                              value: 0.5
                          },
                          shape: {
                              type: 'circle'
                          },
                          size: {
                              value: { min: 1, max: 5 }
                          }
                      },
                      detectRetina: true
                  }"
          />
      </div>
  </template>
  
  <script setup>
  const particlesLoaded = async container => {
      console.log("Particles container loaded", container);
  }
  </script>
  

三、安装中存在的问题及解决方法

如果默认按照npm i tsparticles-slim安装loadSlim并引入

• 则会报如下错误，并且页面是一片”这个叫啥色儿来着“！
  main.js:13 tsParticles - Error in animation loop TypeError: Cannot read properties of undefined (reading 'circleRange')

查了github上的相关内容，给出解决方法（参考地址）

因为tsparticles-slim已经不兼容Vue3，所以所有的tsparticles包都不会生效，目前已经使用@tsparticles/slim包代替

• 重新卸载了 npm uninstall tsparticles-slim
• 并安装 npm i @tsparticles/slim

效果出来了，完美解决！！！