particles在vue3中的基本使用

最新推荐文章于 2024-07-16 17:30:18 发布

做一个程序员

最新推荐文章于 2024-07-16 17:30:18 发布

阅读量1.8k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_52153452/article/details/125889029

版权

本文介绍了如何在Vue3项目中使用particles.js。首先，通过下载包文件开始，接着详细阐述配置过程，包括在main.ts中引入，app.vue中添加组件，以及在setup中定义初始化和加载方法。此外，还提到了需要额外安装的tsparticles依赖包，并提供了官方文档链接作为参考。

摘要由CSDN通过智能技术生成

1、下载对应的包文件

npm install particles.vue3

2、配置对应的文件

1、在main.ts中引入

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

2、在app.vue中填入相关的组件

<Particles
    id="tsparticles"
    :particlesInit="particlesInit" // 此处引入的需要在setup中定义
    :particlesLoaded="particlesLoaded" // 此处引入的需要在setup中定义
    :options="{
      background: {
        color: {
          value: '#999'
        }
      },
      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,
            si