vue3 利用 tsparticles 和 particles.vue3轻松实现一个充满动感的粒子背景效果

### 关于 `@tsparticles/vue3` 的使用教程 #### 安装依赖包 为了能够顺利集成并使用 `@tsparticles/vue3` 组件，在项目中需先安装必要的 npm 包。通过命令行工具执行如下指令完成安装： ```bash npm install @tsparticles/vue3 tsparticles-engine ``` 此操作会下载 tsParticles Vue 3 插件及其核心引擎到当前工作目录下[^2]。 #### 创建粒子效果组件 接着定义一个新的 Vue 单文件组件用于展示带有动画特效的内容。下面是一个简单的例子来说明如何实现这一点： ```html <template> <div class="particles-container"> <!-- 使用 t-s-particles-vue3 自定义标签 --> <t-sparticles-vue3 id="tsparticles" :options="particleOptions"></t-sparticles-vue3> </div> </template> <script lang="ts"> import { defineComponent, reactive } from &#39;vue&#39;; // 导入 TSParticlesVue 类型声明以及默认导出项 import { loadFull } from "tsparticles"; import TSparticlesVue3 from "@tsparticles/vue3"; export default defineComponent({ name: &#39;ParticleEffect&#39;, components: { TSparticlesVue3, }, setup() { // 初始化粒子配置选项对象 const particleOptions = reactive({ background: { color: "#0d47a1", }, fpsLimit: 60, interactivity: { detectsOn: "canvas", events: { onClick: { enable: true, mode: "push" } }, modes: { push: { quantity: 4 } } }, particles: { color: { value: "#ffffff" }, links: { color: "#ffffff", distance: 150, enable: true, opacity: 0.5, width: 1 }, move: { direction: "none", enable: true, outModes: { default: "bounce" }, random: false, speed: 2, straight: false }, number: { density: { enable: true, area: 800 } }, shape: "circle", size: { value: { min: 1, max: 5 } } }, detectRetina: true }); return { particleOptions }; }, mounted() { // 加载完整的 tsParticles 库功能集 this.$nextTick(() => { loadFull(); }); } }); </script> <style scoped> .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } </style> ``` 上述代码片段展示了怎样利用 TypeScript 和 Composition API 来构建一个基于 tsParticles 的交互式背景画布，并设置了基本样式使其覆盖整个视口区域。