526互联

在vue3中使用粒子库particles.vue3，只有背景没有粒子的问题

发布时间 2023-10-10 15:31:15作者: 游戏三昧的木笔

按下述步骤，看是缺少安装包还是缺少引入方法
（题主一开始不能显示粒子的原因是因为没有进行下述红色代码的操作）

1. 要安装两个包

npm install particles.vue3
npm install tsparticles

2. 可选择全局引入main.js

// 导入粒子库
import Particles from "particles.vue3";
// use 注册
createApp(App)
  .use(Particles)
  .mount("#app");

3. 在使用粒子库的页面，例如Login.vue

<template>
  <div>
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="
               .....粒子的样式，不重要
　　　　　　　　　"
    />
  </div>
</template>
<script setup>
// 导入粒子库loadFull方法
import { loadFull } from "tsparticles";
// 初始化粒子库
const particlesInit = async (engine) => {
  await loadFull(engine);
};
</script>

4. 问题解决