vue3中使用particles.js实现炫丽的动态背景

1. 效果预览

先来几张效果图看一下，这几种效果图都是动态的

2. 下载资源

在项目中下载包资源

yarn add @tsparticles/vue3  tsparticles

3. 注册组件

在入口文件main.ts中引用并注册组件

import Particles from "@tsparticles/vue3";
import type { Engine } from '@tsparticles/engine'		// TS类型
import { loadFull } from "tsparticles"

app.use(Particles, {
  init: async(engine:Engine) => {
    await loadFull(engine)
    //	如果不使用动画和图形，可以使用下面的方法加载
    //	await loadSlim(engine);
  }
})

这里使用的TS，需要在XXX.d.ts文件中添加declare module “@tsparticles/vue3”

3. 使用

<vue-particles id="tsparticles" :options="particlesJson" />

options 是配置的JSON文件，也就是根据此文件生成各种各样的动态的样式

可以从particles演示获取你想要的效果JSON

github上面有其他框架的使用方法，如在react中使用的方法

有时候因为版本或各种原因导致不可用，遇到问题的小伙伴可以留言一起解决