particles.vue3

### 如何在 Vue3 中使用 Particles.js 实现粒子效果 #### 安装依赖库 为了能够在项目中集成 `Particles.js`，需要先安装必要的包。通过 npm 或 yarn 来完成此操作。 ```bash npm install particles.js @tsparticles/vue3 @tsparticles/engine ``` 或者如果更倾向于使用 yarn： ```bash yarn add particles.js @tsparticles/vue3 @tsparticles/engine ``` #### 配置入口文件 接下来，在项目的入口文件（通常是 `main.ts` 或者 `main.js`），引入并配置 Particles 组件以及初始化引擎设置[^3]。 ```typescript import { createApp } from 'vue'; import App from './App.vue'; // 导入 Particles 及其相关模块 import Particles from "@tsparticles/vue3"; import type { Engine } from '@tsparticles/engine' import { loadFull } from "tsparticles"; const app = createApp(App); app.use(Particles, { init: async (engine: Engine) => { await loadFull(engine); } }); app.mount('#app'); ``` #### 创建 Particle 组件 可以在 `src/components/` 文件夹内创建一个新的名为 `ParticleBackground.vue` 的组件来封装粒子系统的逻辑和样式[^2]。 ```html <template> <div id="particle-container"> <!-- 这里放置其他UI元素 --> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'ParticleBackground', }); </script> <style scoped> #particle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } </style> ``` 在这个新创建的 `.vue` 文件中还需要定义好对应的 JSON 配置文件用于控制粒子的行为模式，通常命名为 `particles.json` 并存放在同一目录下。 #### 使用自定义组件 最后一步是在想要应用粒子特效的地方导入刚刚制作好的 `ParticleBackground` 组件，并将其加入模板结构之中即可看到效果。 ```html <!-- src/views/LoginView.vue --> <template> <div class="login-page"> <ParticleBackground /> <!-- 登录表单等内容 --> </div> </template> <script setup lang="ts"> import ParticleBackground from '@/components/ParticleBackground.vue'; </script> ``` 这样就完成了基于 Vue3 和 Particles.js 构建的一个简单却吸引人的登录页面背景动画案例[^1]。