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=